BOM
BOM簡介
Browser Object Model 瀏覽器對象模型 核心是window
DOM VS BOM
DOM ： 文檔對象模型
windows對象
瀏覽器的頂級對象
-
js訪問瀏覽器窗口的一個藉口
-
全局對象 定義在全局作用域中的變量或者函數自動變爲windows對象或方法
對象：定時器，name，…
定時器
window.setTimeout(函數,延時時間) 延遲事件默認爲4ms
clearTimeout(timeoutID)
window.setInterval(…)/clearInterval()
頁面加載事件
window.onload = function() {}
窗口加載事件：指的是文檔內容加載完全(圖片、腳本、css等)完成觸發事件
DOMContentLoaded DOM加載完畢 不包含樣式 圖片 flash等
窗口大小事件 窗口大小事件 window.onresize = function() { }
說明： DOM0級或DOM2級綁定皆可
1 只要窗口大小發生像素變化 會觸發改事件
2 可以實現響應式 window.innerWidth獲取當前屏幕寬度
location對象/navigator對象/history對象
1 location對象
location能夠獲取當前網頁的URL
如網址：https://www.taobao.com/?uname=zs
location.href 獲取或設置整個url
location.host 獲取參數 https://www.taobao.com
location.search獲取參數 ?uname=zs
location.assign() 和href一樣 能夠後退頁面
location.replace() 替換當前頁面 不能後退頁面 因爲不記錄歷史
location.reload() 重新加載頁面
2 navigator對象
if(navigator.userAgent.match(/(phone|pad|pod|iphone|…)/))
3 history對象
操作歷史記錄
<body>
<a href="1window.html">跳轉</a>
<button>前進</button>
<script>
// history對象 back()退後 forword()前進 go(1)表示前進一個頁面
document.querySelector('button').onclick = function() {
history.forward();
}
</script>
</body>