BOM

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 都提供了screenLeftscreenTop 闽撤。Firefox則提供 screenXscreenY, 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ù)量箍铭,也可以在歷史紀錄中向后或向前導航到任意頁面泊柬。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市诈火,隨后出現(xiàn)的幾起案子兽赁,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件刀崖,死亡現(xiàn)場離奇詭異惊科,居然都是意外死亡,警方通過查閱死者的電腦和手機蒲跨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門译断,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人或悲,你說我怎么就攤上這事】疤疲” “怎么了巡语?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長淮菠。 經(jīng)常有香客問我男公,道長,這世上最難降的妖魔是什么合陵? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任枢赔,我火速辦了婚禮,結(jié)果婚禮上拥知,老公的妹妹穿的比我還像新娘踏拜。我一直安慰自己,他們只是感情好低剔,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布速梗。 她就那樣靜靜地躺著,像睡著了一般襟齿。 火紅的嫁衣襯著肌膚如雪姻锁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天猜欺,我揣著相機與錄音位隶,去河邊找鬼。 笑死开皿,一個胖子當著我的面吹牛涧黄,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播副瀑,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼弓熏,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了糠睡?” 一聲冷哼從身側(cè)響起挽鞠,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后信认,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體材义,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年嫁赏,在試婚紗的時候發(fā)現(xiàn)自己被綠了其掂。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡潦蝇,死狀恐怖款熬,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情攘乒,我是刑警寧澤贤牛,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站则酝,受9級特大地震影響殉簸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜沽讹,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一般卑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧爽雄,春花似錦蝠检、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至刽沾,卻和暖如春本慕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背侧漓。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工锅尘, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人布蔗。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓藤违,卻偏偏與公主長得像,于是被迫代替她去往敵國和親纵揍。 傳聞我的和親對象是個殘疾皇子顿乒,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內(nèi)容