BOM 瀏覽器對(duì)象模型
1、Borwser Object Model ? ? ? ?
2、 用來(lái)描述瀏覽器相關(guān)信息的幾個(gè)對(duì)象 ? ? ??
3、其中代表瀏覽器窗口的window對(duì)象是BOM的頂層對(duì)象,其他對(duì)象都是該對(duì)象的子對(duì)象。
BOM
1、Window 整個(gè)窗口(頂層)
2、Location url信息
3、History 歷史記錄
4、Screen 屏幕相關(guān)
5、Navigator 瀏覽器版本及客戶機(jī)信息
Window 概述
1、window是客戶端JavaScript的全局對(duì)象
2、它表示web瀏覽器的一個(gè)窗口或窗體,并且用標(biāo)識(shí)符window來(lái)引用
? ? ? ? 是所有客戶端javascript特性和API的主要接入點(diǎn)
? ? ? ? Window包含? location history screen navigator? document
1. window
? ? ? ?1、 innerHeight 返回窗口的文檔顯示區(qū)高度 IE9以下不兼容
? ? ? ?2、innerWidth 返回窗口的文檔顯示區(qū)寬度 IE9以下不兼容
? ? 解決方法
? ? ? ? document.write('視口的寬 : '+document.documentElement.offsetWidth+"
");
? ? ? ? document.write('視口的高 : '+document.documentElement.clientHeight+"
");
? ? ? ? 3、outerWidth 返回窗口外部寬度 IE9以下不兼容
? ? ? ? 4、outerHeigh 返回窗口外部高度 IE9以下不兼容
? ? 解決方法? --暫無(wú)
? ? ? ? 5.彈窗 alert() 無(wú)返回值 confirm() 有返回值 prompt() 有返回值
? ? ? ? 6.setInterval() clearInterval()
? ? ? ? 7.setTimeout() clearTimeout()
? ? ? ? 8.print() window.print();
? ? ? ? 9.scrollTo(x,y) 將內(nèi)容滾動(dòng)到指定坐標(biāo)
? ? ? ? 10.scrollBy() 按照指定像素滾動(dòng) ---回到頂部
? ? ? ? 11.moveTo(x,y) window.moveTo()僅IE
? ? ? ? 12.moveBy() window.moveBy()僅IE
? ? ? ? 13.resizeTo() 將窗口大小調(diào)整到指定的寬度和高度 僅IE
? ? ? ? 14.resizeBy() 按照指定像素調(diào)整窗口大小 僅IE
2. location
? ? ? ? 表示該窗口中當(dāng)前顯示的文檔的URL 并定義了方法來(lái)使窗口載入新的文檔
? ? ? ? 屬性
? ? ? ? 1、href 設(shè)置或返回當(dāng)前的URL協(xié)議
? ? ? ? 2、protocol 設(shè)置或返回當(dāng)前URL的協(xié)議
? ? ? ? 3、host 設(shè)置或返回主機(jī)名和當(dāng)前URL的端口號(hào)
? ? ? ? 4、hostname 設(shè)置或返回當(dāng)前URL的主機(jī)名
? ? ? ? 5、port 設(shè)置或返回當(dāng)前URL的端口號(hào)
? ? ? ? 6、pathname 設(shè)置或返回當(dāng)前URL的路徑部分
? ? ? ? 7、hash 設(shè)置或返回從#開始的錨
? ? ? ? 8、search 設(shè)置或返回從?開始的URL查詢部分
? ? ? ? document.write(location+'
');
? ? ? ? ? ? ? ? document.write('href : '+location.href+'
');
? ? ? ? ? ? ? ? document.write('protocol(協(xié)議) : '+location.protocol+'
');
? ? ? ? ? ? ? ? document.write('host(主機(jī)名和端口號(hào)) : '+location.host+'
');
? ? ? ? ? ? ? ? document.write('hostname(主機(jī)名) : '+location.hostname+'
');
? ? ? ? ? ? ? ?document.write('port(端口號(hào)) : '+location.port+'
');
? ? ? ? --虛擬端口
? ? ? ? --物理端口
? ? ? ? ? ? ? ?document.write('pathname(路徑信息) : '+location.pathname+'
');
? ? ? ? ? ? ? ?document.write('search(查詢信息) : '+location.search+'
');
? ? ? ? ? ? ? ?document.write('hash(錨點(diǎn)) : '+location.hash+'
');
? ? ? ?方法
? ? ? ?1、reload(); --重新加載當(dāng)前文檔 location.reload();
? ? ? ? 2、assign(); --加載新的文檔 ? ? ? ? location.assign(“http://www.baidu.com”);
? ? ? ?3、replace(); --替換當(dāng)前文檔 location.replace(“http://www.baidu.com”);
? ? ? ?--自定義一個(gè)超鏈接
? ? ? ?--定時(shí)刷新
三、navigator
該對(duì)象描述了瀏覽器廠商和版本信息 (瀏覽器相關(guān)信息)
1、Navigator 是為了紀(jì)念NetSpace公司的Navigator 瀏覽器
2、appName 返回瀏覽器的名稱 --只讀
3、cookieEnabled 返回一個(gè)布爾值。true (cookie)可用。false 被禁用。
4、appVersion 返回瀏覽器的平臺(tái)和版本信息
5、userAgent 返回由客戶機(jī)發(fā)送服務(wù)器user-agent頭部的值
6、platform 返回運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)
7、onLine 是否在線
四、history
1、back() 加載history列表中的前一個(gè)URL.
2、forward() 加載history列表中下一個(gè)URL
3、go() 加載history列表中的某個(gè)具體頁(yè)面 (有參數(shù))
五、screen
概述:提供有關(guān)窗口顯示大小和可用顏色數(shù)量的信息
1、width 返回顯示器屏幕的寬度
2、height 返回顯示器屏幕的高度
3、availWidth 返回顯示屏幕寬度(除windows任務(wù)欄之外)
4、availHeight 返回顯示屏幕高度(出windows任務(wù)欄之外)
5、colorDepth 返回目標(biāo)設(shè)備或緩沖器上的調(diào)色板的比特深度