BOM
一、BOM是什么
BOM是針對(duì)瀏覽器的一種對(duì)象模型,用于描述這種對(duì)象與對(duì)象之間層次關(guān)系的模型。瀏覽器本身的特性(如當(dāng)前位置、瀏覽器寬高、以及系統(tǒng)環(huán)境等),而這些與當(dāng)前的web頁(yè)面并無(wú)關(guān)系,而是與當(dāng)前的window(整個(gè)瀏覽器的窗口)相關(guān)。
二、window對(duì)象
BOM的核心對(duì)象是window,它表示瀏覽器的一個(gè)實(shí)例。
在瀏覽器中,window具有雙重身份:(1)JS訪問(wèn)瀏覽器窗口的接口;(2)ECMAScript中規(guī)定的Global對(duì)象
所以,網(wǎng)頁(yè)中任何一個(gè)對(duì)象、變量、函數(shù),都以window作為Global對(duì)象。因此可以訪問(wèn)parseInt()等方法。
知識(shí)點(diǎn):
- 在全局作用域中聲明的變量、函數(shù)都會(huì)變成
window的屬性和方法。 - 使用框架的情況,每個(gè)框架都擁有自己的
window對(duì)象,并且保存在frames集合中,可以用window.frame[0]來(lái)引用。當(dāng)然最好用另一套表達(dá):top最上層window指針、parent父級(jí)window指針、self當(dāng)前窗口。 - 移動(dòng)窗口:
window.screenX // 獲取當(dāng)前橫坐標(biāo)
window.screenY // 獲取當(dāng)前縱坐標(biāo)
window.moveTo(0,0) // 絕對(duì)坐標(biāo)
window.moveBy(0,0) // 相對(duì)坐標(biāo)
- 窗口大小:
window.innerWidth // 對(duì)視圖容器
window.innerHeight
window.outterWidth // 對(duì)瀏覽器
window.outterHeight
window.resizeTo(1,1) // 絕對(duì)調(diào)整
window.resizeBy(1,1) // 相對(duì)調(diào)整
- 導(dǎo)航和打開(kāi)窗口
window.open('http://jianshu.com','_blank') // 第二個(gè)參數(shù)可以是_self, _blank, _top, _parent, 指定名。第三個(gè)參數(shù)不細(xì)講
window.close() // 適用于用window.open()打開(kāi)的
- 間歇調(diào)用
var tid = setTimeout(function(){}, 1000)
clearTimeout(tid)
var iid = setInterval(function(){},1000)
clearInterval(iid)
- 對(duì)話框:
alert()confirm()prompt()window.print()window.find()confrim返回布爾值,prompt返回輸入值
三、location對(duì)象
既是 window 對(duì)象屬性也是 document 對(duì)象屬性。
它提供了文檔相關(guān)信息以及導(dǎo)航功能。
location.hash // 返回URL的hash "#contents"
location.host // 返回服務(wù)器名和端口
location.hostname // 返回不帶端口的服務(wù)器名
location.href // 返回當(dāng)前頁(yè)面的完整url location.toString()方法也返回這個(gè)值
location.pathname // 返回目錄和文件名
location.port // 返回端口
location.protocol // 返回協(xié)議
location.search // 返回查詢字符串 "?name=tony"
location.assign('http://jianshu.com')
window.location = 'http://jianshu.com'
location. // 三者效果一樣
location.replace('http://jianshu.com') // 不會(huì)在歷史記錄中加入新記錄,后退沒(méi)用了
location.reload() // 重載頁(yè)面 傳入?yún)?shù)true禁止緩存加載
四、 navigator 對(duì)象
識(shí)別用戶瀏覽器,先不討論
五、 screen 對(duì)象
表面客戶端能力,最主要的是顯示器信息
六、 history 對(duì)象
history.go(-1) // 后退
history.back()
history.go(1) // 前進(jìn)
history.forward()
history.length // 歷史記錄數(shù)量