BOM屬性對象方法

本文原鏈接:https://cloud.tencent.com/developer/article/1018747

BOM

?1.window對象

2.location對象

3.history對象

BOM也叫瀏覽器對象模型,它提供了很多對象,用于訪問瀏覽器的功能。BOM缺少規范,每個瀏覽器提供商又按照自己想法去擴展它,那么瀏覽器共有對象就成了事實的標準。所以,BOM本身是沒有標準的或者還沒有哪個組織去標準它。

一.window對象

BOM的核心對象是window,它表示瀏覽器的一個實例。window對象處于JavaScript結構的最頂層,對于每個打開的窗口,系統都會自動為其定義?window?對象。

1.對象的屬性和方法

window對象有一系列的屬性,這些屬性本身也是對象。

window對象的屬性

屬性

含義

closed

當窗口關閉時為真

defaultStatus

窗口底部狀態欄顯示的默認狀態消息

document

窗口中當前顯示的文檔對象

frames

窗口中的框架對象數組

history

保存有窗口最近加載的URL

length

窗口中的框架數

location

當前窗口的URL

name

窗口名

offscreenBuffering

用于繪制新窗口內容并在完成后復制已存在的內容,控制屏幕更新

opener

打開當前窗口的窗口

parent

指向包含另一個窗口的窗口(由框架使用)

screen

顯示屏幕相關信息,如高度、寬度(以像素為單位)

self

指示當前窗口。

status

描述由用戶交互導致的狀態欄的臨時消息

top

包含特定窗口的最頂層窗口(由框架使用)

window

指示當前窗口,與self等效

?window對象的方法

方法

功能

alert(text)

創建一個警告對話框,顯示一條信息

blur()

將焦點從窗口移除

clearInterval(interval)

清除之前設置的定時器間隔

clearTimeOut(timer)

清除之前設置的超時

close()

關閉窗口

confirm()

創建一個需要用戶確認的對話框

focus()

將焦點移至窗口

open(url,name,[options])

打開一個新窗口并返回新window對象

prompt(text,defaultInput)

創建一個對話框要求用戶輸入信息

scroll(x,y)

在窗口中滾動到一個像素點的位置

setInterval(expression,milliseconds)

經過指定時間間隔計算一個表達式

setInterval(function,millisenconds,[arguments])

經過指定時間間隔后調用一個函數

setTimeout(expression,milliseconds)

在定時器超過后計算一個表達式

setTimeout(expression,milliseconds,[arguments])

在定時器超過時后計算一個函數

print()

調出打印對話框

find()

調出查找對話框

window下的屬性和方法,可以使用window.屬性、window.方法()或者直接屬性、方法()的方式調用。例如:window.alert()和alert()是一個意思。

2.系統對話框

瀏覽器通過alert()、confirm()和prompt()方法可以調用系統對話框向用戶顯示信息。系統對話框與瀏覽器中顯示的網頁沒有關系,也不包含HTML。

//彈出警告

alert('Lee');//直接彈出警告

//確定和取消

confirm('請確定或者取消');//這里按哪個都無效

if?(confirm('請確定或者取消'))?{//confirm本身有返回值

alert('您按了確定!');//按確定返回true

}?else?{

alert('您按了取消!');//按取消返回false

}

//輸入提示框

var?num?=?prompt('請輸入一個數字',?0);//兩個參數,一個提示,一個值

alert(num);//返回值可以得到

//調出打印及查找對話框

print();//打印

find();//查找

defaultStatus?=?'狀態欄默認文本';//瀏覽器底部狀態欄初始默認值

status='狀態欄文本';//瀏覽器底部狀態欄設置值

3.新建窗口

使用window.open()方法可以導航到一個特定的URL,也可以打開一個新的瀏覽器窗口。它可以接受四個參數:1.要加載的URL;2.窗口的名稱或窗口目標;3.一個特性字符串;4.一個表示新頁面是否取代瀏覽器記錄中當前加載頁面的布爾值。

open('http://www.baidu.com');//新建頁面并打開百度

open('http://www.baidu.com','baidu');//新建頁面并命名窗口并打開百度

open('http://www.baidu.com','_parent');//在本頁窗口打開百度,_blank是新建

PS:不命名會每次打開新窗口,命名的第一次打開新窗口,之后在這個窗口中加載。窗口目標是提供頁面的打開的方式,比如本頁面,還是新建。

第三字符串參數

設置

說明

width

數值

新窗口的寬度。不能小于100

height

數值

新窗口的高度。不能小于100

top

數值

新窗口的Y坐標。不能是負值

left

數值

新窗口的X坐標。不能是負值

location

yes或no

是否在瀏覽器窗口中顯示地址欄。不同瀏覽器默認值不同

menubar

yes或no

是否在瀏覽器窗口顯示菜單欄。默認為no

resizable

yes或no

是否可以通過拖動瀏覽器窗口的邊框改變大小。默認為no

scrollbars

yes或no

如果內容在頁面中顯示不下,是否允許滾動。默認為no

status

yes或no

是否在瀏覽器窗口中顯示狀態欄。默認為no

toolbar

yes或no

是否在瀏覽器窗口中顯示工具欄。默認為no

fullscreen

yes或no

瀏覽器窗口是否最大化,僅限IE

//第三參數字符串

open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');

//open本身返回window對象

var?box?=?open();

box.alert('');//可以指定彈出的窗口執行alert();

//子窗口操作父窗口

document.onclick?=?function?()?{

opener.document.write('子窗口讓我輸出的!');

}

3.窗口的位置和大小

用來確定和修改window對象位置的屬性和方法有很多。IE、Safari、Opera和Chrome都提供了screenLeft和screenTop屬性,分別用于表示窗口相對于屏幕左邊和上邊的位置。Firefox則在screenX和screenY屬性中提供相同的窗口位置信息,Safari和Chrome也同時支持這兩個屬性。

//確定窗口的位置,IE支持

alert(screenLeft);//IE支持

alert(typeof?screenLeft);//IE顯示number,不支持的顯示undefined

//確定窗口的位置,Firefox支持

alert(screenX);//Firefox支持

alert(typeof?screenX);//Firefox顯示number,不支持的同上

PS:screenX屬性IE瀏覽器不認識,直接alert(screenX),screenX會當作一個為聲明的變量,導致不執行。那么必須將它將至為window屬性才能顯示為初始化變量應有的值,所以應該寫成:alert(window.screenX)。

//跨瀏覽器的方法

var?leftX?=?(typeof?screenLeft?==?'number')???screenLeft?:?screenX;

var?topY?=?(typeof?screenTop?==?'number')???screenTop?:?screenY;

窗口頁面大小,Firefox、Safari、Opera和Chrome均為此提供了4個屬性:innerWidth和innerHeight,返回瀏覽器窗口本身的尺寸;outerWidth和outerHeight,返回瀏覽器窗口本身及邊框的尺寸。

alert(innerWidth);//頁面長度

alert(innerHeight);//頁面高度

alert(outerWidth);//頁面長度+邊框

alert(outerHeight);//頁面高度+邊框

PS:在Chrome中,innerWidth=outerWidth、innerHeight=outerHeight;

PS:IE沒有提供當前瀏覽器窗口尺寸的屬性;不過,在后面的DOM課程中有提供相關的方法。

在IE以及Firefox、Safari、Opera和Chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight中保存了頁面窗口的信息。

PS:在IE6中,這些屬性必須在標準模式下才有效;如果是怪異模式,就必須通過document.body.clientWidth和document.body.clientHeight取得相同的信息。

//如果是Firefox瀏覽器,直接使用innerWidth和innerHeight

var?width?=?window.innerWidth;//這里要加window,因為IE會無效

var?height?=?window.innerHeight;

if?(typeof?width?!=?'number')?{//如果是IE,就使用document

if?(document.compatMode?==?'CSS1Compat')?{

width?=?document.documentElement.clientWidth;

height?=?document.documentElement.clientHeight;

}?else?{

width?=?document.body.clientWidth;//非標準模式使用body

height?=?document.body.clientHeight;

}

}

PS:以上方法可以通過不同瀏覽器取得各自的瀏覽器窗口頁面可視部分的大小。document.compatMode可以確定頁面是否處于標準模式,如果返回CSS1Compat即標準模式。

//調整瀏覽器位置

moveTo(0,0);//IE有效,移動到0,0坐標

moveBy(10,10);//IE有效,向下和右分別移動10像素

//調整瀏覽器大小

resizeTo(200,200);//IE有效,調正大小

resizeBy(200,200);//IE有效,擴展收縮大小

PS:由于此類方法被瀏覽器禁用較多,用處不大。

4.間歇調用和超時調用

JavaScript是單線程語言,但它允許通過設置超時值和間歇時間值來調度代碼在特定的時刻執行。前者在指定的時間過后執行代碼,而后者則是每隔指定的時間就執行一次代碼。

超時調用需要使用window對象的setTimeout()方法,它接受兩個參數:要執行的代碼和毫秒數的超時時間。

setTimeout("alert('Lee')",?1000);//不建議直接使用字符串

function?box()?{

alert('Lee');

}

setTimeout(box,?1000);//直接傳入函數名即可

setTimeout(function?()?{//推薦做法

alert('Lee');

},?1000);

PS:直接使用函數傳入的方法,擴展性好,性能更佳。

調用setTimeout()之后,該方法會返回一個數值ID,表示超時調用。這個超時調用的ID是計劃執行代碼的唯一標識符,可以通過它來取消超時調用。

要取消尚未執行的超時調用計劃,可以調用clearTimeout()方法并將相應的超時調用ID作為參數傳遞給它。

var?box?=?setTimeout(function?()?{//把超時調用的ID復制給box

alert('Lee');

},?1000);

clearTimeout(box);//把ID傳入,取消超時調用

間歇調用與超時調用類似,只不過它會按照指定的時間間隔重復執行代碼,直至間歇調用被取消或者頁面被卸載。設置間歇調用的方法是setInterval(),它接受的參數與setTimeout()相同:要執行的代碼和每次執行之前需要等待的毫秒數。

setInterval(function?()?{//重復不停執行

alert('Lee');

},?1000);

取消間歇調用方法和取消超時調用類似,使用clearInterval()方法。但取消間歇調用的重要性要遠遠高于取消超時調用,因為在不加干涉的情況下,間歇調用將會一直執行到頁面關閉。

var?box?=?setInterval(function?()?{//獲取間歇調用的ID

alert('Lee');

},?1000);

clearInterval(box);//取消間歇調用

但上面的代碼是沒有意義的,我們需要一個能設置5秒的定時器,需要如下代碼:

var?num?=?0;//設置起始秒

var?max?=?5;//設置最終秒

setInterval(function?()?{//間歇調用

num++;//遞增num

if?(num?==?max)?{//如果得到5秒

clearInterval(this);//取消間歇調用,this表示方法本身

alert('5秒后彈窗!');

}

},?1000);//1秒

一般認為,使用超時調用來模擬間歇調用是一種最佳模式。在開發環境下,很少使用真正的間歇調用,因為需要根據情況來取消ID,并且可能造成同步的一些問題,我們建議不使用間歇調用,而去使用超時調用。

var?num?=?0;

var?max?=?5;

function?box()?{

num++;

if?(num?==?max)?{

alert('5秒后結束!');

}?else?{

setTimeout(box,?1000);

}

}

setTimeout(box,?1000);//執行定時器

PS:在使用超時調用時,沒必要跟蹤超時調用ID,因為每次執行代碼之后,如果不再設置另一次超時調用,調用就會自行停止。

二.location對象

location是BOM對象之一,它提供了與當前窗口中加載的文檔有關的信息,還提供了一些導航功能。事實上,location對象是window對象的屬性,也是document對象的屬性;所以window.location和document.location等效。

alert(location);//獲取當前的URL

location對象的屬性

屬性

描述的URL內容

hash

如果該部分存在,表示錨點部分

host

主機名:端口號

hostname

主機名

href

整個URL

pathname

路徑名

port

端口號

protocol

協議部分

search

查詢字符串

location對象的方法

方法

功能

assign()

跳轉到指定頁面,與href等效

reload()

重載當前URL

repalce()

用新的URL替換當前頁面

location.hash?=?'#1';//設置#后的字符串,并跳轉

alert(location.hash);//獲取#后的字符串

location.port?=?8888;//設置端口號,并跳轉

alert(location.port);//獲取當前端口號,

location.hostname?=?'Lee';//設置主機名,并跳轉

alert(location.hostname);//獲取當前主機名,

location.pathname?=?'Lee';//設置當前路徑,并跳轉

alert(location.pathname);//獲取當前路徑,

location.protocal?=?'ftp:';//設置協議,沒有跳轉

alert(location.protocol);//獲取當前協議

location.search?=?'?id=5';//設置?后的字符串,并跳轉

alert(location.search);//獲取?后的字符串

location.href?=?'http://www.baidu.com';//設置跳轉的URL,并跳轉

alert(location.href);//獲取當前的URL

在Web開發中,我們經常需要獲取諸如?id=5&search=ok這種類型的URL的鍵值對,那么通過location,我們可以寫一個函數,來一一獲取。

function?getArgs()?{

//創建一個存放鍵值對的數組

var?args?=?[];

//去除?號

var?qs?=?location.search.length?>?0???location.search.substring(1)?:?'';

//按&字符串拆分數組

var?items?=?qs.split('&');

var?item?=?null,?name?=?null,?value?=?null;

//遍歷

for?(var?i?=?0;?i?<?items.length;?i++)?{

item?=?items[i].split('=');

name?=?item[0];

value?=?item[1];

//把鍵值對存放到數組中去

args[name]?=?value;

}

return?args;

}

var?args?=?getArgs();

alert(args['id']);

alert(args['search']);

location.assign('http://www.baidu.com');//跳轉到指定的URL

location.reload();//最有效的重新加載,有可能從緩存加載

location.reload(true);//強制加載,從服務器源頭重新加載

location.replace('http://www.baidu.com');//可以避免產生跳轉前的歷史記錄

三.history對象

history對象是window對象的屬性,它保存著用戶上網的記錄,從窗口被打開的那一刻算起。

history對象的屬性

屬性

描述URL中的哪部分

length

history對象中的記錄數

history對象的方法

方法

功能

back()

前往瀏覽器歷史條目前一個URL,類似后退

forward()

前往瀏覽器歷史條目下一個URL,類似前進

go(num)

瀏覽器在history對象中向前或向后

function?back()?{//跳轉到前一個URL

history.back();

}

function?forward()?{//跳轉到下一個URL

history.forward();

}

function?go(num)?{//跳轉指定歷史記錄的URL

history.go(num);

}

PS:可以通過判斷history.length?==?0,得到是否有歷史記錄。

轉載于:https://www.cnblogs.com/leftJS/p/11070006.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/448646.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/448646.shtml
英文地址,請注明出處:http://en.pswp.cn/news/448646.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

nginx+php+mysql+haproxy+keepalived+NFS,搭建wordpress

實現LNMP 實現環境&#xff1a; 服務版本系統CentOS7.6Mysql5.6.34Nginx1.14.2PHP7.1.30HAProxy1.8.20Keepalived1.3.5NFS1.3.0主機IPMysql_master192.168.37.108Mysql_slave192.168.37.105NginxPHP192.168.37.103NginxPHP192.168.37.104HAProxyKeepalived192.168.37.101HAPro…

OpenCL “速成”沖刺【第一天】

話說軟件開發從來沒有速成一說&#xff0c;一門語言你學的越快&#xff0c;說明你在別的語言上下個功夫越多&#xff0c;所以這次加了引號&#xff0c;只不過幾周之后可能會有一個公司內部OpenCL的考核&#xff0c;雖然本人不需要考核&#xff0c;不過也正好借機整理下之前Open…

Java8函數式編程

最近使用lambda表達式&#xff0c;感覺使用起來非常舒服&#xff0c;箭頭函數極大增強了代碼的表達能力。于是決心花點時間深入地去研究一下java8的函數式。 一、lambda表達式 先po一個最經典的例子——線程 public static void main(String[] args) {// Java7new Thread(new R…

電腦如何獲得管理員權限

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 我只是記錄下&#xff0c;方便以后查看。 參見&#xff1a; https://jingyan.baidu.com/article/ab69b270ff426e2ca6189f54.html

.NET混淆器 Dotfuscator如何保護應用程序?控制流了解一下!

Dotfuscator是一個.NET的Obfuscator。它提供企業級的應用程序保護&#xff0c;大大降低了盜版、知識產權盜竊和篡改的風險。Dotfuscator的分層混淆、加密、水印、自動失效、防調試、防篡改、報警和防御技術&#xff0c;為世界各地成千上萬的應用程序提供保護。 Dotfuscator提供…

到底什么才是人生最大的投資

不是房子&#xff0c;不是股票&#xff0c; 是人&#xff0c;跟什么人交往&#xff0c;跟隨什么人&#xff0c; 交什么樣的朋友&#xff0c;其實就是你投資什么人&#xff0c; 而這&#xff0c;是對人生影響最大的。 錢不會給人機會&#xff0c;房子也不會&#xff0c; 只有人會…

tcpdump抓包命令

目錄&#xff1a; 命令格式選項expression表達式示例【命令格式】 man手冊顯示如下 1 tcpdump [ -AbdDefhHIJKlLnNOpqStuUvxX# ] [ -B buffer_size ]2 [ -c count ]3 [ -C file_size ] [ -G rotate_seconds ] [ -F file ]4 [ -i …

百度Ueditor編輯器wordimage踩坑

背景 改造公司老項目后臺編輯器&#xff0c;使用百度的Ueditor做替換。 發現問題 1、ue編輯器初始化后部分參數無法覆蓋ueditor.config.js中的選項。2、wordimage&#xff08;word圖片轉存&#xff09;始終是灰色&#xff0c;無法使用。解決辦法 1、將ueditor.config.js中的inp…

IntelliJ IDEA 配置JDK

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 IDEA配置JDK 1、點擊File -->Project Structure&#xff1b; 2、點擊左側標簽頁SDKs選項&#xff0c;再點擊左上角“”&#xff0c;…

get和post 兩種基本請求方式的區別

GET和POST是HTTP請求的兩種基本方法&#xff0c;要說它們的區別&#xff0c;接觸過WEB開發的人都能說出一二。 最直觀的區別就是GET把參數包含在URL中&#xff0c;POST通過request body傳遞參數。 你可能自己寫過無數個GET和POST請求&#xff0c;或者已經看過很多權威網站總結出…

無論是工作還是生活都要記住這些話

1.如果你不喜歡現在的工作&#xff0c;要么辭職不干&#xff0c;要么就閉嘴不言。初出茅廬&#xff0c;往往眼高手低&#xff0c;心高氣傲&#xff0c;大事做不了&#xff0c;小事不愿做。不要養成挑三揀四的習慣。不要雨天煩打傘&#xff0c;不帶傘又怕淋雨&#xff0c;處處表…

蘇嵌第一天,shell中一些基礎知識

一、常用環境變量 1、HOME變量 Linux系統中的每個用戶都有一個相關的稱作HOME的目錄。 2、PATH變量 包含一列用冒號定界的目錄的路徑名字&#xff0c;便于可執行程序的搜索。 3、PS1變量 PS1變量包含了shell提示符&#xff0c;$符號 4、LOGNAME變量 包含用戶的注冊名字…

Java異常處理001:Maven clean package時Failed to clean project: Failed to delete

Java異常處理001&#xff1a;Maven打包時Failed to clean project: Failed to delete 異常日志&#xff1a; [ERROR] Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.6.1:clean (default-clean) on project fmk-web: Failed to clean project: Failed …

Weekly Contest 141

做了第一道后&#xff0c;看了下中間兩道題目&#xff0c;沒怎么看懂就先放著&#xff0c;做完最后一道&#xff0c;然后就沒時間了。 1089. Duplicate Zeros Given a fixed length array arr of integers, duplicate each occurrence of zero, shifting the remaining element…

IntelliJ IDEA 中配置、使用 SVN

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1.配置svn 如下圖&#xff1a; file -- setting -- version control -- subversion -- 選擇 SVN安裝路徑 -- apply -- OK 2.直接檢出…

切記!職場郵件需注意的細節

電子郵件是如今工作場所重要的通信工具之一&#xff0c;但不是每個人都知道如何很好地使用這個工具。工作郵件也是人際溝通的一種方式&#xff0c;和打電話、面談一樣&#xff0c;有很多學問講究&#xff0c;所以在發送郵件之前一定要深思熟慮。 【發送&#xff0c;抄送&…

李洋瘋狂C語言之初

1.sizeof 是看數據類型所占空間大小&#xff0c;這個大小是以 字節&#xff08;B&#xff09;為單位 char 是C語言的字符數據類型 %d 用在printf 中表示往屏幕打印一個數字 printf ("char&#xff1a; %d\n", sizeof(char)); 數據類型之間的關系&#xff0c;shor…

時時流量查看工具-ifsta,nload,iftop

為什么80%的碼農都做不了架構師&#xff1f;>>> 1、ifstat 是一個網絡流量監測程序。能查看網卡的流出和流入的字節. 概要&#xff1a;ifstat就像iostat/vmstat描述其它的系統狀況一樣&#xff0c;是一個統計網絡接口活動狀態的工具。 參數&#xff1a; -l 監測環路…

10大清宿便排毒方法及簡單排毒瘦小腹運動

早上空腹喝水法&#xff1a;每日起床后空腹喝下500C.C.加鹽的冷開水。只要是冷的飲料或水分&#xff0c;在腸胃空腹時都有刺激腸胃蠕動的效果&#xff0c;而且越冰刺激效果越好&#xff0c;建議不需加鹽&#xff0c;以免高血壓患者因鹽分中的金屬離子造成腎的負擔。 優酪乳加綠…

破解 IntelliJ IDEA 、免費注冊方法、注冊碼

1. 找到hosts文件&#xff0c;在此路徑下 C:\Windows\System32\drivers\etc 2. 修改hosts 文件&#xff0c;在最后 加一行配置&#xff1a; &#xff08;此操作需要電腦管理員權限&#xff09; 0.0.0.0 account.jetbrains.com 3. 從idea 注冊碼生成網站生成一組注冊碼。網…