瀏覽器對象模型BOM,提供了訪問瀏覽器的接口。這些功能大多和網頁內容無關,多年來,由於缺乏規范導致BOM中的不同方法在不同瀏覽器中的實現有所差異,直到html5,才將BOM的主要方面納入規范。
BOM常用的特性包括:
一、window對象
window對象在瀏覽器中具有雙重角色:它既是ECMAscript規定的全局global對象,又是javascript訪問瀏覽器窗口的一個接口。
1.獲取窗口相對於屏幕左上角的位置
//獲取窗口相對於屏幕左上角的位置 var leftPos=(typeof window.screenLeft==='number')?window.screenLeft:window:screenX; var topPos=(typeof window.screenLeft==='number')?window.screenTop:window:screenY;
需要注意的一點是,在IE,opera中,screenTop保存的是頁面可見區域距離屏幕左側的距離,而chrome,firefox,safari中,screenTop/screenY保存的則是整個瀏覽器區域距離屏幕左側的距離。也就是說,二者差了一個瀏覽器工具欄的像素高度。
2,移動窗口,調整窗口大小
window.moveTo(0,0)
window.moveBy(20,10)
window.resizeTo(100,100);
window.resizeBy(100,100);
注意,這幾個方法在瀏覽器中很可能會被禁用。
3.獲得瀏覽器頁面視口的大小
var pageWith=document.documentElement.clientWidth||document.body.clientWidth; var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
4.導航和打開窗口
window.open()既可以導航到特定的URL,也可以打開一個新的瀏覽器窗口,其接收四個參數,要加載的url,窗口目標(可以是關鍵字_self,_parent,_top,_blank),一個特性字符串,以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。通常只需要傳遞第一個參數。
注意,在很多瀏覽器中,都是阻止彈出窗口的。
5.幾個時序相關的函數(原來這是BOM的實現,而非ECMAjavascript的實現)
setInterval()
setTimeout()
6.系統對話框,這些對話框外觀由操作系統/瀏覽器設置決定,css不起作用,所以很多時候可能需要自定義對話框
alert():帶有一個確定按鈕
confirm():帶有一個確定和取消按鈕
prompt():顯示OK和Cancel按鈕之外,還會顯示一個文本輸入域
二、location對象
location對象提供了當前窗口加載的文檔的相關信息,還提供了一些導航功能。事實上,這是一個很特殊的對象,location既是window對象的屬性,又是document對象的屬性。
location.hash #contents 返回url中的hash,如果不包含#后面的內容,則返回空字符串
location.host www.wrox.com:80 返回服務器名稱和端口號
location.port 80 返回端口號
location.hostname www.wrox.com 返回服務器名稱
location.href http://www.wrox.com 返回當前加載頁面的完整url
location.pathname /index.html 返回url中的目錄和文件名
location.protocol http 返回頁面使用的協議
location.search ?q=javascript 返回url中的查詢字符串
改變瀏覽器的位置:
location.href=http://www.baidu.com
如果使用location.replace('http://www.baidu.com'),不會在歷史記錄中生成新紀錄,用戶不能回到前一個頁面。
location.reload():重置當前頁面,可能從緩存,也可能從服務器;如果強制從服務器取得,傳入true參數
三,navigator對象
這個對象代表瀏覽器實例,其屬性很多,但常用的不太多。如下:
navigator.userAgent:用戶代理字符串,用於瀏覽器監測中、
navigator.plugins:瀏覽器插件數組,用於插件監測
navigator.registerContentHandler 注冊處理程序,如提供RSS閱讀器等在線處理程序。
四、history對象
history對象保存着用戶上網的歷史記錄,使用go()實現在用戶的瀏覽記錄中跳轉:
history.go(-1) 等價於history.back()
history.go(1) 等價於 history.forward()
history.go(1) //前進兩頁
history.go('wrox.com')