[TOC] >[info]BOM是browser object model的縮寫，簡稱瀏覽器對象模型。 * BOM是browser object model的縮寫，簡稱瀏覽器對象模型 * BOM提供了獨立于內容而與瀏覽器窗口進行交互的對象 * 由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對象是window * BOM由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性  ## window對象 >[info]window對象是BOM的頂層(核心)對象，所有對象都是通過它延伸出來的，也可以稱為window的子對象。 * 所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。 * 所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。 * 全局變量是 window 對象的屬性。 * 全局函數是 window 對象的方法 ### Window 尺寸 >[info]有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。 對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： ~~~ window.innerHeight //瀏覽器窗口的內部高度 window.innerWidth //瀏覽器窗口的內部寬度 ~~~ 對于 Internet Explorer 8、7、6、5： ~~~ document.documentElement.clientHeight document.documentElement.clientWidth ~~~ 或者 ~~~ document.body.clientHeight document.body.clientWidth ~~~ 實用的 JavaScript 方案（涵蓋所有瀏覽器）： ~~~ var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; ~~~ ### 定時器 #### setInterval() 方法 >[info]setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。 setInterval()方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。 ~~~ <script type="text/javascript"> setInterval(code,millisec[,"lang"]); </script> ~~~ <table class="dataintable"> <tbody> <tr> <th> 參數 </th> <th> 描述 </th> </tr> <tr> <td> code </td> <td> 必需。要調用的函數或要執行的代碼串。 </td> </tr> <tr> <td> millisec </td> <td> 必須。周期性執行或調用 code 之間的時間間隔，以毫秒計。 </td> </tr> </tbody> </table> ~~~ <input type="text" id="clock" size="35"/> <script language=javascript> var int=self.setInterval("clock()",50)//定時器 function clock(){ //產生一個時間對象 var t=new Date() //附值到id為clock這個地方 document.getElementById("clock").value=t } </script> <button onclick="int=window.clearInterval(int)"> Stop interval</button>//清除定時器 ~~~ #### setTimeout() 方法 >[info]setTimeout() 方法用于在指定的毫秒數后調用函數或計算表達式。 ~~~ <script type="text/javascript"> setTimeout(code,millisec) </script> ~~~ >[danger]提示：setTimeout() 只執行 code 一次。 ## History 對象 >[info]History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。 History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。 ### length 屬性 >[info]屬性聲明了瀏覽器歷史列表中的元素數量。 ~~~ <script type="text/javascript"> document.write(history.length); </script> ~~~ ### back() 方法 >[info]方法可加載歷史列表中的前一個 URL（如果存在）。 調用該方法的效果等價于點擊后退按鈕或調用 history.go(-1)。 ~~~ <script type="text/javascript"> history.back() </script> ~~~ ### forward() 方法 >[info]方法可加載歷史列表中的下一個 URL。 調用該方法的效果等價于點擊前進按鈕或調用 history.go(1)。 ~~~ <script type="text/javascript"> history.forward() </script> ~~~ ### go()方法 >[info]方法可加載歷史列表中的某個具體的頁面。 ~~~ <script type="text/javascript"> history.go(number|URL); </script> ~~~ ## Location 對象 >[info]Location對象包含有關當前 URL 的信息。 Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問。 ### assign() 方法 >[info]方法可加載一個新的文檔。 ~~~ <script type="text/javascript"> location.assign(URL); </script> ~~~ ### reload() 方法 >[info]方法用于重新加載當前文檔。 ~~~ <script type="text/javascript"> location.reload(force) </script> ~~~ >[danger]**作業：** 寫一個按鈕，點擊刷新頁面。