第七章

BOM

1. window对象：作为BOM的核心对象，它表示浏览器的一个实例。在浏览器中它有双重角色，既是通过JavaScript访问浏览器的一个接口，又是ECMAScript规定的Global对象。这意味着网页中定义的任何一个对象，变量和函数都是以window作为其Global对象。
2. 全局作用域：由于window对象同时是ECMAScript规定的Global对象，因此所有在全局作用域中声明的变量，函数都会变成window对象的属性和方法。
   • 直接定义全局变量和在window对象上定义属性有一点差别：全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以。
   • 直接访问未声明的变量会报错，但通过查询window对象，可以知道某个可能未声明的变量是否存在。
3. 窗口关系及框架：
   • 如果页面中包含框架，则每个框架都有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引(从0开始，从左到右，从上到下)或者框架名称来访问相应的window对象。
   • 每个window对象都有name属性，其中包含框架的名称。
   • top对象始终指向最高(即最外)层的框架，也即是浏览器窗口。使用它可以确保在一个框架中正确的访问另一个框架。
   • parent对象始终指向当前框架的直接上层框架(依据具体代码所在框架而定)。在某些情况下，parent有可能等于top；但在没有框架的情况下，parent一定等于top(此时它们都等于window对象)。
   • 除非最高层窗口是通过window.open打开的，否则其window对象的name属性不会包含任何值。
   • 窗口位置：
     1. screenLeft 屏幕左边(ie,safari,opera,chrome)
     2. screenTop 屏幕上边(ie,safari,opera,chrome)
     3. screenX 屏幕横坐标(firefox,safari,chrome)
     4. screenY 屏幕纵坐标(firefox,safari,chrome)
   • 窗口大小：
     1. outerHeight，outerWidth 浏览器窗口本身的尺寸高度，无论是最外层的window对象还是从某个框架访问。(ie9+,firefox,safari,chrome)
     2. innerHeight，innerWidth 该容器中页面视图区域的大小(减去边框宽度)。
     3. 在opera中，outerHeight和outerWidth返回的是页面视图容器的大小，即单个标签对应的浏览器窗口。
     4. 在chrome中，outerHeight和outerWidth与innerHeight和innerWidth输出的值相同，都是视口大小而非浏览器窗口大小。
     5. document.documentElement.clientHeight，document.documentElement.clientWidth 页面视口大小。(ie,firefox,safari,opera,chrome；ie6标准模式下)
     6. document.body.clientHeight，document.body.clientWidth 页面视口大小。(ie6混杂模式下)
     7. 对于chrome浏览器，前两个返回相同的值。
     8. 对于移动浏览器，innerHeight，innerWidth返回屏幕上可视页面区域的大小。随着页面的缩放，值会发生相应变化。
     9. 对于移动ie浏览器，document.documentElement.clientHeight，document.documentElement.clientWidth返回屏幕上可视页面区域的大小。随着页面的缩放，值会发生相应变化。
     10. 对于移动浏览器，document.documentElement返回的是渲染后页面的实际大小。这些值不会随页面变化。
     11. 对于移动ie浏览器，document.body.clientWidth和document.body.clientHeight返回的是渲染后页面的实际大小。这些值不会随页面变化。
     12. resizeTo()接收两个参数，即浏览器窗口的新宽高。可能会被禁用。
     13. resizeBy()接收两个参数，即新窗口和原窗口的宽高差。可能会被禁用。
   • 导航和窗口打开
     1. window.open()：可导航到一个特定的url，或打开一个新的浏览器窗口。
        1. 可接收四个参数：
           1. 要加载的url
           2. 窗口目标，也可以是(_self，_top，_blank，_parent)
           3. 一个特性字符串
           4. 一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
        2. 通常只需要传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。
        3. 如果传递了第二个参数，且该参数是已有窗口或框架的名称，就会在具有该名称的窗口或框架下打开第一个参数指定的url。
        4. 如果传递的第二个参数不是已经存在的窗口或框架，则该方法会根据第三个参数位置上传入的字符串创建一个新的窗口或框架。如果没有传入第三个参数，则会创建一个全部默认设置的新窗口或新框架。
        5. 第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示那些特性。(不允许出现空格)

           设置	值	说明
           fullscreen	yes no	表示浏览器窗口是否最大化，仅限ie
           height	数值	表示新窗口的高度，不小于100
           left	数值	表示新窗口的左坐标，不可为负值
           location	yes no	表示是否在浏览器窗口中显示地址栏。不同浏览器默认值不同
           menubar	yes no	表示是否在浏览器窗口中显示菜单栏，默认为no
           resizeable	yes no	表示是否可以通过拖动浏览器窗口的边框来改变其大小，默认为no
           scrollbars	yes no	表示如果内容在视口中显示不下，是否允许滚动，默认为no
           status	yes no	表示是否在浏览器窗口中显示状态栏，默认为no
           toobar	yes no	表示是否在浏览器窗口中显示工具栏，默认为no
           top	数值	表示新窗口的上坐标，不可为负值
           width	数值	表示新窗口的高度，不小于100

        6. 该方法会返回一个指向新窗口的引用对象。可以通过这个引用对象来控制新窗口。比如调用resizeTo方法，moveTo方法或者close方法。
        7. 该方法会返回一个指向新窗口的引用对象。该对象中有一个opener属性，保存着打开它的原始窗口对象。这个属性只在弹出窗口的最外层window对象(top)中有定义，而且指向调用window.open()的窗口或框架。
   • 弹出窗口屏蔽程序：当弹出窗口被屏蔽时，应该考虑以下两种情况来检测
     1. 如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么window.open()很可能会返回null，此时只要检测返回的值就可以确定弹出窗口是否被屏蔽了。
     2. 如果是浏览器扩展或其他程序阻止的弹出窗口，那么window.open()很可能会抛出一个错误。
     3. 想要准确的检测出弹出窗口是否被屏蔽，必须在检测返回值的同时，将对window.open()的调用封装在一个try-catch块中。
   • 间歇调用与超时调用
     1. 超时调用：
        • setTimeout()接收两个参数，即要执行的代码和以毫秒表示的时间。表示在指定毫秒后开始执行代码。返回一个数值ID，表示超时调用。
        • clearTimeout()接收一个数值ID，表示取消超时调用。
        • 超时调用的代码都是在全局作用域下执行的。因此函数中this在非严格模式下指向window对象，在严格模式下表示undefined。
     2. 间歇调用：
        • setInterval()接收两个参数，即要执行的代码和以毫秒表示的间隔时间。表示以指定的时间间隔来循环执行代码，直到被取消或页面被卸载。返回一个数值ID，表示间歇调用。
        • clearInterval()接收一个数值ID，表示取消间歇调用。
     3. 最好不要使用间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束前就开始。最好的方法是使用超时调用来模拟间歇调用。
   • 系统对话框：外观由操作系统或浏览器设置决定，而不是CSS。且它们都是同步和模拟的，即这些对话框出现时代码会停止运行，对话框关闭后代码接着运行。
     1. alert()：通常用来生成警告对话框，向用户显示一些他们无法控制的消息，如错误警告，用户在看完消息后只能关闭对话框。
     2. confirm()：有确认和取消按钮，可以让用户决定是否执行给定的操作。可以检查confirm()返回的值来确定是点击了那个按钮。true表示确定按钮，false表示取消或点击了右上角的×。
     3. prompt()：有确认和取消按钮，还有一个文本输入框供用户输入内容。接收两个参数，即显示给用户看的提示文本和文本输入框的默认内容。如果用户点击了确定，该方法返回输入框中的值；叉掉或点击取消，则返回null。
     4. 两个可以通过JavaScript打开的对话框
        • window.find() "查找"对话框，与浏览器菜单的"查找"命令相同。
        • window.print() "打印"对话框，与浏览器菜单的"打印"命令相同。
4. location对象
   • 提供了与当前窗口中加载的文档有关的信息，以及一些导航功能。
   • 既是window对象的属性，也是document对象的属性。因此window.location与document.location指向同一个对象。
   • 下列是location对象的属性

     属性名	例子	说明
     hash	"#contents"	返回url中的hash(#后面跟零或多个字符)。如果url不包含散列，则返回空字符
     host	"www.wrox.com:80"	返回服务器名称和端口号(如果有)
     hostname	"www.wrox.com"	返回不带端口号的服务器名称
     href	"https://www.baidu.com"	返回当前加载页面完整的url。location对象的toString方法也是返回这个值
     pathname	"/study/"	返回url中的目录和文件名
     port	"8888"	返回url中指定的端口号。如果不含端口号，则返回空字符串
     protocol	"https:"	返回页面中使用的协议
     search	"?id=0002"	返回url的查询字符串。这个字符串以问号开头

   • 位置操作：
     1. location.assign()接收一个url作为参数，跳转到该url。会在历史记录中生成一条新的记录。可以通过“退回”来导航到前一个页面。
     2. location.href="新的url"，也会调用assign方法。会在历史记录中生成一条新的记录。可以通过“退回”来导航到前一个页面。
     3. window.location="新的url"，也会调用assign方法。会在历史记录中生成一条新的记录。可以通过“退回”来导航到前一个页面。
     4. loction.replace()接收一个url，表示跳转到该url页面。但不会在历史记录中生成新的记录，即不能再回到前一个页面。
     5. location.reload()，表示重新加载当前显示的页面。如果不传递参数，则会以最有效的方式进行重新加载。即，如果页面自上个请求以来并没有改变过，则会从浏览器缓存中加载。如果要强制从服务器重新加载，则传入一个true即可。
     6. 位于location.reload()后的代码可能会执行，也可能不会。取决于网络延迟或系统资源等因素。所以最好把该方法放在最后一行。
5. navigator对象
   • 用来获取客户端浏览器信息
   • 检测浏览器中是否安装特定插件(非ie)，可以使用plugins数组，该数组的每一项都包含以下属性
     1. name：插件的名字
     2. description：插件的描述
     3. filename：插件的文件名
     4. length：插件所处理的MIME类型数量
     5. plugins有个refresh方法，用于刷新plugins以反映最新安装的插件。该方法接收一个参数：表示是否应该重新加载页面的布尔值。如果将这个值设置为true，则会重新加载包含插件的所有页面；否则，只会更新plugins集合，不会重新加载页面。
   • 检测浏览器中是否安装特定插件(ie)，必须使用专有的ActiveXObject类型，并尝试创建一个特定插件的实例。IE是以COM对象的方式实现插件，而COM对象使用唯一标识符来标识。所以要检查特定的插件，必须知道其COM标识符。
6. screen对象：基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如宽高和像素等。
7. history对象
   1. 每个浏览器窗口，每个标签甚至每个框架，都有自己的history对象。
   2. 开发者无法获取用户浏览过的url。
   3. 使用go()方法可以进行任意跳转，接收一个参数：
      • 表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转，正数表示向前跳转
      • 一个字符串参数。此时浏览器会跳转到历史记录中包含该字符串的第一个位置。
   4. back()方法表示向后退。
   5. forward()方法表示向前进。
   6. length属性，保存着历史记录的数量。这个数量包含所有历史记录，即所有向前向后的记录。对于加载到窗口，标签页或框架的第一个页面而言，length为0。