学习第四天（2019-11-17）

Posted 2020-11-22 xiaoxb17

第八章 BOM

    ECMAScript是javascript的核心，但如果要在Web中使用JavaScript，那么BOM（浏览器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

一、window对象

BOW的核心对象是window对象，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是 ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。

1、全局作用域

      a、所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法；

      b、全局变量不能通过 delete 操作符删除，而直接在window对象上的定义的属性可以；

      c、尝试访问未声明的变量会抛出错误，但是通过查询 window 对象，可以知道某个可能未声明的变量是否存在，如：

      d、var newValue = oldValue;  //报错，oldValue未定义 

      e、var newValue = window.oldValue;     //这里不会抛出错误，因为这是一次属性查询 ，newValue 的值是undefined

2、窗口关系及框架 

      a、 如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从 0开始，从左至右，从上到下）或者框架名称来访问相应的window对象。每个window对象都有一个 name 属性，其中包含框架的名称。

      b、top 对象始终指向高（外）层的框架，也就是浏览器窗口；

      c、与 top 相对的另一个 window 对象是 parent。parent（父）对象始终指向当前框架的直接上层框架；

          注意：除非高层窗口是通过 window.open()打开的，否则其 window 对象的 name 属性不会包含任何值；

      d、self对象始终指向window，self 和 window 对象可以互换使用。引入self 对象的目的只是为了与 top 和 parent 对象对应起来，因此它不格外包含其他值。

3、窗口位置

      a、screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置，很多浏览器提供了这两个属性，但Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息，下列代码可以跨浏览器取得窗口左边和上边的位置：

1 var leftPos = (typeof window.screenLeft == "number") ?  
2                window.screenLeft : window.screenX; 
3 var topPos = (typeof window.screenTop == "number") ?
4                window.screenTop : window.screenY; 

       b、上述属性不同浏览器有些小的不同，使用 moveTo() 和 moveBy()方法倒是有可能将窗口精确地移动到一个新位置。

             这两个方法都接收两个参数，moveTo()接收的是新位置的 x和 y坐标值，而 moveBy()接收的是在水平和垂直方向上移动的像素数。

 

            需要注意的是，这两个方法可能会被浏览器禁用；而且，在 Opera和 IE 7（及更高版本）中默认就是禁用的。另外，这两个方法都不适用于框架，只能对外层的 window 对象使用 。

4、窗口大小

     跨浏览器确定一个窗口的大小不是一件简单的事，因为不同浏览器支持的属性不同。相关的4个属性：innerWidth、innerHeight、outerWidth 和 outerHeight。

     document.documentElement.clientWidth 和 document.documentElement.clientHeight 中保存了页面视口的信息，在 IE6中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过document.body.clientWidth和document.body. clientHeight 取得相同信息。

     虽然终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小。

     使用 resizeTo()和 resizeBy()方法可以调整浏览器窗口的大小。

5、导航和打开窗口 

     使用 window.open()方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。

6、间歇调用和超时调用 

     超时调用需要使用 window 对象的 setTimeout()方法，它接受两个参数：要执行的代码和以毫秒 表示的时间（即在执行代码前需要等待多少毫秒）；

     间歇调用与超时调用类似，它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载，设置间歇调用的方法是 setInterval()；

     一般认为，使用超时调用来模拟间歇调用的是一种佳模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。

7、系统对话框

   a、浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息。

   b、除了上述三种对话框之外，Google Chrome浏览器还引入了一种新特性。如果当前脚本在执行过程 中会打开两个或多个对话框，那么从第二个对话框开始，每个对话框中都会显示一个复选框，以便用户阻止后续的对话框显示，除非用户刷新页面，后来又有其他浏览器实现了这个新特性。

   c、还有两个可以通过 JavaScript打开的对话框，即“查找”和“打印”。这两个对话框都是异步显示 的，能够将控制权立即交还给脚本。这两个对话框与用户通过浏览器菜单的“查找”和“打印”命令 打开的对话框相同。而在 JavaScript中则可以通过 window 对象的 find()和 print()方法 打开它们。 

二、location 对象 

    location 是最有用的 BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一 些导航功能。它既是 window 对象的属性，也是 document 对象的属性，所以，window.location 和 document.location 引用的是同一个对象。

   location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将 URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。

   location 对象可以用来，查询字符串参数 和来改变浏览器的位置。

   replace()方法，这个方法 只接受一个参数，即要导航到的 URL,但不会在历史记录中生成新记录。在调用 replace()方法之后，用户不能回到前一个页面。

   reload()，作用是重新加载当前显示的页面，好将 reload()放在代码的后一行。

三、navigator 对象 

     navigator 对象提供了与浏览器有关的信息。到底提供哪些信息，很大程度上取决于用户的浏览器。

     navigator 对象的属性通常用于检测显示网页的浏览器类型，还可用作检测插件，注册处理程序 。

四、screen 和 history对象

    screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。每个浏览器中的 screen 对象都包含着各不相同的属性。

    history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。

    虽然 history 并不常用，但在创建自定义的“后退”和“前进”按钮，以及检测当前页面是不是用户历史记录中的第一个页面时，还是必须使用它。