ECMAScript是JavaScript的核心尼夺,但如果要在Web中使用JavaScript哗脖,那么BOM(瀏覽器對象模型)則無疑才是真正的核心。W3C為了把瀏覽器中的JavaScript最基本部分標準化龙誊,已經(jīng)將BOM的主要方面納入了HTML5的規(guī)范中韭寸。
window對象
DOM的核心對象是window春哨,他表示瀏覽器的一個實例。在瀏覽器中恩伺,window對象有雙重角色赴背,它既是通過JavaScript訪問瀏覽器窗口的一個借口,又是ECMAScript規(guī)定的Global對象。
全局作用域
由于 window 對象同時扮演著 ECMAScript中 Global對象的角色凰荚,因此在全局作用域中聲明的變量(var)燃观、函數(shù)都會變成window對象的屬性和方法。但 定義全局變量 和 直接定義window的屬性還有有一點細微的差別:即全局變量不能通過 delete 操作符刪除便瑟,而直接定義的屬性可以缆毁。
var age = 29
window.color = 'red'
// 在 IE < 9 時拋出異常,在其他所有瀏覽器中都是false
delete window.age
// 在 IE < 9 時拋出錯誤到涂,在其他瀏覽器都返回true
delete window.color
console.log(window.age) // 29
console.log(window.color) // undefined
此外一個小技巧:查詢?nèi)肿饔糜蛑幸粋€變量是否存在
if (window.variable) {
// todo
}
窗口關系及框架
如果頁面中包含框架脊框,則每個框架都擁有自己的window對象,保存在frames集合中践啄,通過數(shù)值索引或者框架名稱來訪問相應的window對象浇雹。
<html>
<head>
<title> Frameset Example </title>
</head>
<frameset rows="160, *">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%, 50%">
<frame src="anotherframe.html" name="leftFrane"></frame>
<frame src="yeranotherframe.html" name="rightFrame"></frame>
</frameset>
</frameset>
</html>
以上示例,可以通過window.frames[0] 或者 window.frames["topFrame"]來引用上方的框架屿讽。但最好使用 top 而非 window 來引用這些框架(top.frames[0])昭灵。top對象始終指向最高(最外)層的框架,使用它可以確保在一個框架中正確訪問另一個框架聂儒。
與 tuo 相對的晾衣桿 window 對象是 parent虎锚。parent(父)對象始終指向當前框架的直接上層框架硫痰。在沒有框架的情況下衩婚, parent = top
<html>
<head>
<title> Frameset Example </title>
</head>
<frameset rows="100, *">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%, 50%">
<frame src="anotherframe.htm" name="leftFrane" />
<frame src="anotherframeset.htm" name="rightFrame" /> <!-- 包含另一個框架集 -->
</frameset>
</frameset>
</html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols="50%, 50%">
<frame src="red.htm" name="redFrame">
<frame src="blue.htm" name="blueFrame">
</frameset>
</html>
如上代碼,如果 代碼位于 readFrame(或blueFrame)中效斑,那么 parent 對象指向的就是 rightFrame非春。可是缓屠,如果代碼位于topFrame中奇昙,則 parent 指向的是 top, 因為 topFrame 的值上層框架是最外層框架敌完。
與框架相關的最后一個對象是 self储耐,它始終指向 window;引入self對象的目的 只是為了 與 top 和 parent 對象對應起來滨溉。
窗口位置
用來確定和修改 window 對象位置的屬性和方法有很多什湘。IE、Safari晦攒、Opera 和 Chrome 都提供了screenLeft
和 screenTop
闽撤。Firefox則提供 screenX
和 screenY
, Safari 和 Chrome 也同時支持這兩個屬性。 Opera 也支持這兩個屬性脯颜,但是 與 screenLeft 和 screenTop 屬性并不對應哟旗。
// 兼容代碼
var leftPos = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop === 'number') ? window.screenTop : window.screenY
在 IE、Opera 中,screenLeft 和 screenTop 表示 從屏幕坐標和上邊到由window對象表示的頁面可見區(qū)域的距離闸餐。即饱亮,如果瀏覽器緊貼屏幕,則 screenTop 的高度為 瀏覽器上方工具欄的高度舍沙。但是在 Chrome近尚、Firefox 和 Safari 中,screenTopY 或 screenTop中保存的是整個瀏覽器窗口相對于屏幕的坐標值场勤。即在窗口的y坐標為0(瀏覽器緊貼屏幕)是返回0戈锻。
在 Firefox 、Safari和媳、Chrome 中會始終返回每個框架的 top.screenX 和 top.screenY(最外層窗口)格遭。IE、Opera 則會給出框架相對于屏幕邊界的精確坐標留瞳。
以上瀏覽器的之間的差異會導致拒迅,在跨瀏覽器的條件下取得窗口左邊和上邊的精確、坐標值她倘。然而璧微,使用moveTo() 和 moveBy() 方法可以將窗口精確地移動到一個新位置。
- moveTo() 接收的是新位置的x和y坐標
- moveBy() 接收的是在水平和垂直方向上移動的像素值
// 將窗口移動到屏幕右上角
window.moveTo(0, 0)
// 將窗口向下移動 100 像素
window.moveBy(0, 100)
需要注意的是硬梁,這兩個方法可能會被瀏覽器禁用前硫;而且,在Opera 和 IE7(及更高版本)中默認就是禁用的荧止。另外屹电,這兩個方法都不適用于框架,只能對最外層的window對象使用跃巡,
窗口大小
瀏覽器提供查看窗口大小的四個屬性:innerWidth危号、innerHeight、outerWidth 和 outerHeight素邪。
在IE9+外莲、Safari、Firefox中兔朦,outerWidth/Height 返回瀏覽器本身的尺寸偷线。
在 Opera 中,這個兩個屬性值表示頁面視圖容器(標簽對應瀏覽器窗口)的大小烘绽。
而innerWidth 和 innerHeight 則表示該容器中頁面視圖區(qū)的大小(減去邊框?qū)挾?淋昭。在Chrome中,outerWidth安接、outerHeight 與 innerWidth 翔忽、innerHeight (在頁面全屏情況下英融,并且瀏覽器正常縮放率100%歇式,視圖區(qū)沒有遮罩(比如控制臺))的情況下返回相同的值驶悟,即視口(viewport)大小而非瀏覽器窗口大小。
在IE8及跟早版本中沒有提供取得當前瀏覽器窗口尺寸的屬性材失。在IE(ie6標準模式下)痕鳍、Firefox、Safari龙巨、Opera笼呆、Chrome中。document.documentElement.clientWidth 和 documen.documentEkement.clientHeight 中保存了也是視口信息
在IE6的混雜模式下需要 document.body.clientWidth 和 document.body.clientHeight 取得同樣的信息旨别。對于 混雜模式的Chrome 這幾種方式都可以無法獲取視口大小诗赌。
var pageWidth = window.innerWidth
var pageHeight = window.pageHeight
if (typeof pageWidth !== 'number') {
if (document.compatMode === 'CSS1Compat') { // CSS1Compat 標志兼容模式(strict mode)
pageWidth = document.documentElement.clientWidth
pageHeight = document.documentElement.clientHeight
} else { // BackCompat 混雜模式(quirks mode) 也稱怪異模式
pageWidth = document.body.clientWidth
pageHeight = document.body.clientHeight
}
}
對于移動設備,window.innerWidth 和 window.innerHeight 保留著可見視口秸弛,也就是屏幕上可見頁面區(qū)域的大小铭若。移動IE瀏覽器不支持這些屬性,但 document.documentElement.clientWidth / clientHeight提供了相同的信息递览。隨著頁面的縮放叼屠,這些值也會相應變化。
在其他瀏覽器中绞铃,document.documentElement 度量的是布局視口镜雨,即渲染后頁面的實際大小(與可見視口不同,可見視口只是整個頁面中的一小部分)
憎兽。移動IE將 布局視口的信息保存在 document.body.clientWidth / clientHeight中冷离。這些值不會隨著頁面縮放變化。
由于與左面瀏覽器間存在這些差異纯命,最好是先檢查以下用戶是否在使用移動設備,然后再決定使用哪個屬性痹栖。
使用 resizeTo() 亿汞、resizeBy() 可以調(diào)整瀏覽器窗口的大小,他們分別接收兩個 數(shù)值參數(shù)
// 穿件一個窗口
var w = window.open('','', 'width=100,height=100');
// 設置為 100 x 100
w.resizeTo(100, 100)
// 調(diào)整為 200 x 150(原有的基礎上 +)
w.resizeBy(100, 50)
// 設置為 300 x 300
w.resizeTo(300, 300)
PS: 不能設置那些不是通過 window.open 創(chuàng)建的窗口或 Tab 的大小揪阿。 當一個窗口里面含有一個以上的 Tab 時疗我,無法設置窗口的大小。
導航和打開窗口
使用 window.open() 方法既可以導航到一個特定的URL南捂,也可以打開一個新的瀏覽器窗口吴裤。這個方法接受四個參數(shù)。
window.open(URL, 窗體目標, 特性字符串, 是否取代瀏覽器歷史記錄中當前加載頁面的布爾值)
- @param1 {String} : 要加載的URL
- @param2 {String} : 窗口目標
- 如果是已有的窗口或框架名稱溺健,那么就會在具有該名稱的窗口或框架中加載第一個參數(shù)指定的URL麦牺。也可以是下列任何一個特殊的窗口名稱: _self、_parent、_top剖膳、_blank
- @param3 {String} : 如果第二個參數(shù)不是已存在的窗口或框架魏颓,那么該方法就會根據(jù)第三個參數(shù)的字符串創(chuàng)建一個新窗口或新標簽頁。下面是窗口的顯示特性
- fullscreen {yes/no}:表示流里流氣窗口是否最大化吱晒,僅限IE
- height {Number}:表示新窗口的高度甸饱,不能小于100
- width {Number}:表示新窗口的寬度,不能小于100
- left {Number}:表示新窗口的左坐標仑濒,不能是負值
- top {Number}:表示新窗口的上坐標叹话,不能是負值
- menubar {yes/no}:表示是否在瀏覽器窗口中顯示菜單欄。默認值為no
- resizable {yes/no}:表示是否可以通過拖動瀏覽器窗口的邊框改變其大小墩瞳,默認值為no
- scrollbars {yes/no}:表示如果內(nèi)容在視口中顯示不下渣刷,是否允許滾動。默認值為no
- status {yes/no}:表示能否在瀏覽器窗口中顯示狀態(tài)欄矗烛,默認值為no
- toolbar {yes/no}:表示是否在瀏覽器窗口中顯示工具欄辅柴,默認值為no
- @param4 {Boolean}:表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值,該參數(shù)只有在不打開新窗口的情況下使用瞭吃。
// 特性字符串中不允許出現(xiàn)空格 如下:
window.open('', '', 'width=200,height=200,top=200,left=400')
window.open()方法會返回一個執(zhí)行新窗口的引用碌嘀。允許我們對齊調(diào)整大小或移動位置⊥峒埽可以像操作其他窗口一樣操作新打開的窗口股冗。
const baiduWin= window.open('http://www.baidu.com/', 'baiduWin','height=400,width=400,resizable=yes')
// 調(diào)整大小
baiduWin.resizeTo(600, 400)
// 移動位置
baiduWin.moveTo(400, 200)
此外可以調(diào)用 close() 方法來關閉新打開的窗口。僅適用于通過window.open()創(chuàng)建的新窗口
新建的 window 對象有一個opener 屬性和蚪,其中保存在打開它的原始窗口對象止状。這個屬性只在彈出窗口中的最外層 window 對象(top)中有定義
const baiduWin= window.open('http://www.baidu.com/', 'baiduWin','height=400,width=400,resizable=yes')
console.log(baiduWin.opener == window) // true
這些瀏覽器(如IE8 和 Chrome)會在獨立的進程中運行每個標簽頁。在Chrome中攒霹,將新創(chuàng)建的標簽頁的opener屬性設置為null怯疤,即表示在獨立進程中運行的新標簽頁。
const baiduWin= window.open('http://www.baidu.com/', 'baiduWin','height=400,width=400,resizable=yes')
console.log(baiduWin.opener == window)
baiduWin.opener = null
將 opener 屬性設置為null 就是告訴瀏覽器新建的標簽頁不需要與打開它的標簽頁通信催束,因此可以在獨立的進程中運行集峦。標簽頁之間的聯(lián)系一旦切斷,將沒有辦法恢復抠刺。
彈出窗口屏蔽
大多數(shù)瀏覽器都內(nèi)置有彈出窗口屏蔽程序塔淤,或使用帶有內(nèi)置屏蔽程序的實用工具(如Yahoo!)。就是用戶可以將絕大多數(shù)不想看到彈出窗口的屏蔽掉速妖。于是高蜂,在彈出窗口是就需要考慮這兩種情況。
當瀏覽器內(nèi)部屏蔽程序阻止彈出窗口罕容,那么 window.open() 就會返回 null
const otherWin = window.open('http://www.xxx.com', '_blank')
if ( otherWin === null ) {
// todo
}
如果是瀏覽器擴展或其他程序阻止窗口备恤,則會拋出異常稿饰。所有綜合兩種方式,最后的辦法是 使用 try-catch
var flag = false
try {
const otherWin = window.open('http://www.xxx.com', '_blank')
if (otherWin == null) {
flag = true
}
} catch() {
flag = true
}
if (flag) {
// todo
}
間接調(diào)用和超時調(diào)用
JavaScript 是單線程語言烘跺,但它允許通過設置超時值和間歇時間值來調(diào)度代碼在特定的時刻執(zhí)行湘纵。
超時調(diào)用
window.setTimeout(), 接受兩個參數(shù):第一個參數(shù)是包含 JavaScript的字符串(與 eval() 一致)或者一個函數(shù),第二個參數(shù)是 毫秒時間
// 不建議傳遞 字符串
setTimeout('alert("Hello World")', 1000)
// 推薦使用函數(shù)
setTimeout(function() {
console.log('Hi You!')
}, 1000)
傳遞字符串可能導致性能損失滤淳,因此不建議以字符串作為第一個參數(shù)梧喷;第二個參數(shù)告訴JavaScript再過多長時間把當前任務添加到隊列中。如果隊列是空的脖咐,那么添加的代碼會立即執(zhí)行铺敌;如果隊列不是空的,那么他就要等前面的代碼執(zhí)行完了以后再執(zhí)行屁擅。
調(diào)用 setTimeout() 后會返回一個數(shù)值 ID偿凭,表示定時器的唯一標識,可以通過 clearTimeout(ID)來取消定時器
const timerId = setTimeOut(function() {
console.log('Hello World')
},1000)
// 取消
clearTimeout(timerId)
間歇調(diào)用
window.setInterval(), 參數(shù)與 setTimeout() 一致
// 不建議傳遞字符串
setInterval('console.log("awsl")', 1000)
// 推薦方式
setInterval(function() {
console.log('awsl')
}, 1000)
同樣 它返回一個 唯一標識派歌⊥淠遥可以通過 clearInterval() 來清除 間歇調(diào)用
var num = 0
var max = 10
var intervalId = null
function incrementNumber () {
num++
// 如果只選次數(shù)達到了max 設定值,則取消后續(xù)尚未執(zhí)行的調(diào)用
if (num == max) {
clearInterval(intervalId)
alert('Done')
}
}
intervalId = setInterval(incrementNumber, 500)
變量num 胶果,每半秒遞增一次匾嘱,當遞增到最大值時就會取消先前設定的間隙調(diào)用。這個模式也可以使用超時調(diào)用 來實現(xiàn)早抠。
var num = 10
var max = 10
function incrementNumber() {
num++
// 如果執(zhí)行次數(shù)達到max 設定的值霎烙,則設置另一次 超時調(diào)用
if ( num < max) {
setTimeout(incrementNumber, 500)
} else {
console.log('Done')
}
}
setTimeout(incrementNumber, 500)
一般認為,使用超時調(diào)用來模擬間隙調(diào)用的是一種最佳模式蕊连。在開發(fā)環(huán)境下悬垃,很少使用真正的間隙調(diào)用,原因是后一個間隙調(diào)用可能會在前一個間隙調(diào)用結(jié)束之后啟動甘苍。而像前面實例中那樣使用超時調(diào)用尝蠕,則完全可以避免這一點。所以羊赵,最好不要使用間隙調(diào)用趟佃。
系統(tǒng)對話框
瀏覽器通過
alert()
、confirm()
和prompt()
可以調(diào)用系統(tǒng)對話框向用戶顯示消息昧捷。它們的外觀由操作系統(tǒng)及(或)瀏覽器設置決定。通過這幾個方法打開的對話框都是同步和模態(tài)的罐寨。顯示這些對話框的時候代碼會停止執(zhí)行靡挥,而關掉這些對話框后代碼又會恢復執(zhí)行。
- alert():接受一個字符串鸯绿。通過alert()生成的“警告”對話框向用戶顯示一些他們無法控制的消息跋破,例如錯誤消息簸淀。
- confirm():接受一個字符串。點擊 確定 按鈕 返回true毒返,點擊 取消 按鈕返回false
- prompt():除了顯示OK和Cancel按鈕之外租幕,還會顯示一個文本輸入域。接受兩個參數(shù)拧簸,一個是要顯示的文本劲绪,第二個是輸入框中默認的值(默認為空)。當用戶確定后盆赤,返回文本框提交的值贾富,取消或者沒有點擊ok,則返回null牺六。
// alert
alert('hh')
// confim
if (confim('Are you sure?')) {
alert('I'm so glad you're sure! ')
} else {
alert('i'm sorry to hear you're not sure. ')
}
// prompt
var res = prompt('what is your name?')
if (res !== null) {
alert('Welcome, ' + res)
}
location 對象
location 是最有用的 BOM 對象之一颤枪,它提供了當前窗口中加載的文檔有關的信息,還提供了一些導航功能淑际。它就是window 對象的屬性畏纲,也是document 對象的屬性。所有 window.location 和 document.location 引用的是同一個對象春缕。他將 URL 解析為獨立的片段盗胀,讓開發(fā)人員可以通過不同的屬性訪問這些片段。
location的屬性
屬性名 | 例子 | 說明 |
---|---|---|
hash | ‘#contents’ | 返回URL中的hash(#后面的字符)淡溯,如果URL中不包含散列读整,則返回空字符串 |
host | 'www.baidu.com:80' | 返回服務器每次和端口號(如果有) |
hostname | ‘www.baidu.com’ | 返回服務器名稱(不帶端口號) |
href | 'http:/www.wrox.com' | 返回當前頁面加載頁面的完整URL。而location對象的toString()方法也是返回這個值 |
pathname | ‘/index.html’ | 返回URL中的目錄(或)文件名咱娶、路由 |
port | ‘8080’ | 返回URL中指定的端口號米间。如果URL中不包含端口號,則這個屬性返回空字符串膘侮。 |
protocol | ‘http:’ | 返回頁面使用的協(xié)議屈糊。通常是 http: 和 https |
search | '?search=xxx' | 返回URL地方查詢字符串。這個字符串以問號開頭 |
查詢字符串
通過 location.search 返回從問號到URL末尾的所有內(nèi)容琼了,但卻沒有辦法逐個訪問其中的每個查詢字符串參數(shù)逻锐。為此,可以像下面這樣創(chuàng)建一個函數(shù)雕薪,用于解析查詢字符串
function getQueryStringArgs() {
// 獲取 查詢字符串
let qs = location.search.length > 0 ? location.search.substring(1) : ''
// 保存數(shù)據(jù)的對象
let args = {}
if (qs === '') return args
// 取得每一項
let items = qs.split('&')
let item, key,value
// 遍歷
for(let i = 0; i < items.length; i++){
item = items[i].split('=')
key = item[0]
value = item[1]
if (key.length) {
args[key] = value
}
}
return args
}
// 測試
let args = getQueryStringArgs()
console.dir(args)
位置操作
使用 location 對象可以通過很多方式來改變?yōu)g覽器的位置昧诱。最常用的方式,就是使用 assign() 方法并為其傳遞一個 URL所袁。
location.assign('http://www.baidu.com/')
如果是將 location.href 或 window.location 設置為一個 URL 值盏档,也會調(diào)用 assign() 方法
window.location = 'http://www.baidu.com/'
location.
在這些改變?yōu)g覽器位置方法中,最常用的是設置location.href屬性燥爷。另外修啊給 location對象的其他屬性也會改變當前加載的頁面蜈亩。例如:
location.hostname = 'www.baidu.com'
每次修改 location 的屬性(hash 除外),頁面都會以新URL重寫加載
location.replace()
通過上述任何一種方式修改URL之后懦窘,瀏覽器的歷史紀錄中都會生成一條新記錄,因此用戶通過單擊‘后退’按鈕都會導航到前一個頁面稚配。要禁用這種行為畅涂,可以使用 replace() 方法,這個方法只接受一個參數(shù)道川,即要導航到的URI午衰,但不會在歷史記錄中生成新記錄。在調(diào)用 replace() 方法之后愤惰,用戶不能回到前一個頁面苇经。
location.replace('http://www.baidu.com')
最后一個方法是 reload(),如果調(diào)用 reload() 時不傳遞任何參數(shù)宦言,頁面就會以最有效的方式重新加載扇单。頁面就會從瀏覽器緩存中重新加載,如果要強制從服務器重新加載奠旺,則需要為改方法傳遞 true蜘澜。
location.reload() // 重新加載(有可能從緩存中加載)
location.reload(true) // 重新加載 (從服務器重新加載)
navigator 對象
navigator通常用來檢測顯示網(wǎng)頁瀏覽器的類型。查看屬性和方法
檢測插件
檢測瀏覽器中是否安裝了特定的插件時一種最常用的檢測歷程响疚。對于非IE瀏覽器而言鄙信,可以通過 plugins 這個數(shù)組來達到目的,這個數(shù)組包含下列屬忿晕。
- naviator.plugin()
- name: 插件的名字
- description:插件的描述
- filename:插件的文件名
- length:插件處理的MIME類型較量装诡。
一般來說,name屬性中會包含檢測插件必需的所有信息践盼,但有時候也不完全如此鸦采。在檢測插件時,需要像下面這樣循環(huán)迭代每個插件并將插件的name與給定的名字進行比較咕幻。
// 檢測插件(在IE中無效)
function hasPlugin(name) {
name = name.toLowerCase()
for (let i = 0; i < navigator.plugins.length; i++) {
if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
return true
}
}
return false
}
// 檢測 Flash
console.log(hasPlugin('Flash'))
在IE中檢測插件比較麻煩渔伯,IE不支持 Netscape 式的插件。在IE中檢測插件的唯一方式就是使用專有的ActiveXObject 類型肄程,并嘗試創(chuàng)建一個特例插件的實例锣吼。IE是以COM對象的方式實現(xiàn)插件的,而COM對象是以唯一標識符來標識蓝厌。因此玄叠,要想檢測特定的插件,就必須知道其COM標識符拓提。例如Flash的標識符是:ShockwaveFlash.ShockwaveFlash
// 檢測IE中的插件
function hasIEPlugins(name) {
try {
new ActivexObject(name)
return true
}catch(err) {
return false
}
}
// 檢測 Flash
console.log(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'))
建余檢測這兩種插件方法差別太大诸典,因此典型的做法是針對每個插件分別創(chuàng)建檢測函數(shù),而不是使用前面的這些檢測方法崎苗。如檢測Flash插件:
function hasFlash() {
var res = hasPlugin('Flash') // 檢測非IE環(huán)境
if (!res) { // 不存在
res = hasIEPlugin('ShockwaveFlash.ShockwaveFlash') // 檢測IE環(huán)境
}
return res
}
// 檢測 Flash
console.log(hasFlash())
注冊處理程序
Firefox2 為 navigator 對象新增了 registerContentHandler() 和 registerProtocolHandler()方法狐粱。可以讓一個站點指明它可以處理特定類型的信息胆数。隨著RSS閱讀器和在線電子郵件程序的興起肌蜻,注冊處理程序就為像 使用桌面程序一樣默認使用這些在線應用程序提供了一種方式。
registerContentHandler() 方法接收三個參數(shù):要處理的MIME類型必尼,處理該MIME類型頁面的URL蒋搜、應用程序的名稱。比如判莉,要將一個站點注冊為處理RSS源的處理程序豆挽,可以使用如下代碼。
navigator.registerContentHandler('application/rss+xml', 'http://www.somereader.com?feed=%s', 'Some Render')
// 第一個參數(shù)是 RSS 源的MIME類型
// 第二個參數(shù)是 應該接收 RSS 源URL的URL券盅,其中%s標識 RSS 源URL帮哈。
類似的調(diào)用方法也適用于 registerProtocolHandler() 方法,他介紹兩個參數(shù):要處理的協(xié)議(例如锰镀,mailto 或 ftp)娘侍、處理該協(xié)議的頁面的URL、應用程序的名稱泳炉。
navigator.registerProtocolHandler("mailto", "http://www.somemailclient.com?cmd=%s", "SIme Maik Ckuent")
screen 對象
screen 對象基本上只用來表面客戶端的能力憾筏,包括瀏覽器窗口外部的顯示器的信息,如像素寬度和高度等花鹅。每個瀏覽器中的screen對象都包含著各不相同的屬性氧腰。查看屬性
// 適用 screen 來 跳轉(zhuǎn)窗體大小
window.resizeTo(screen.availWidth, screen.availHeight)
history 對象
history 對象保存著用戶上網(wǎng)的歷史記錄,從窗口打開的哪一科算起刨肃。history是window對象的屬性古拴,因此每個瀏覽器窗口、每個標簽頁之景、每個框架斤富,都有自己的history對象于特定的window對象關聯(lián)。出于安全方面的考慮锻狗,開發(fā)人員無法得知用戶瀏覽的URL满力。不過可以適用 go() 方法 在用戶的歷史紀錄中任意跳轉(zhuǎn)。
// 后退一頁
history.go(-1)
// 前進一頁
history.go(1)
// 前進兩頁
histoyr.go(2)
也可以傳遞字符串參數(shù)轻纪,此時瀏覽器會跳轉(zhuǎn)到歷史紀錄中包含該該字符串的第一個位置——可能后退油额,也可能前進,具體要看哪個位置最近刻帚。如果歷史紀錄中不包含該字符串潦嘶,那么這個方法什么也不做。
// 跳到最近的baidu.com 頁面
history.go(baidu.com)
// 跳到最近的mozilla.org頁面
history.go('mozilla.org')
還可以使用兩個簡寫的方法來代替 back()
和 forward()
來代替 go()崇众。
// 后退一頁
history.back()
// 前進一頁
history.forward()
history還有一個length的屬性掂僵,這個屬性保存著歷史紀錄的數(shù)量航厚。這個數(shù)量包括所有歷史記錄。
if (history.length === 0) { // 這應該是用戶打開窗口后的第一個頁面
// todo
}
小結(jié):
瀏覽器對象模式(BOM)以window對象為依托锰蓬,標識瀏覽器窗口以及頁面可見區(qū)域幔睬。同時,window對象還是ECMAScript中的Global對象芹扭,因而所有全局變量(var聲明的)和函數(shù)都是它的屬性麻顶,且所有原生的構(gòu)造函數(shù)及其他函數(shù)也都存在于它的命名空間下。
- 在使用框架時舱卡,每個框架都有自己的 window 對象以及所有原生構(gòu)造函數(shù)及其他函數(shù)的副本辅肾。每個框架都保存在 frames 集合中,可以通過位置或通過名稱來訪問轮锥。
- 有一些窗口的指針矫钓,可以用來引用其他框架,包括父框架
- top對象始終指向最外圍的框架交胚,也就是整個瀏覽器窗口份汗。
- parent對象標識包含當前框架的框架,也就是整個瀏覽器窗口蝴簇。
- 使用location對象可以通過變成方式來訪問瀏覽器的導航系統(tǒng)杯活。設置相應的屬性,可以逐段或整體性地修改瀏覽器的URL熬词。
- 調(diào)用 replace() 方法可以導航到一個新URL旁钧,同時該URL會替換瀏覽器歷史紀錄中當前顯示的頁面。
- navigator 對象提供了于瀏覽器有關下信息互拾。很大程度上取決于用戶的瀏覽器歪今;不過,也有一些公共的屬性(如 userAgent)存在于所有瀏覽器中颜矿。
BOM還有 screen 和 history對象寄猩,但他們的功能有限。screen中保存著于客戶端顯示器有關的信息骑疆,這些信息一邊用于站點分析田篇。history對象為訪問瀏覽器的歷史紀錄開了一個小裂縫,開發(fā)人員可以據(jù)此判斷歷史紀錄的數(shù)量箍铭,也可以在歷史紀錄中向后或向前導航到任意頁面泊柬。