[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]**作业：** 写一个按钮，点击刷新页面。