JavaScript高级程序设计（读书笔记）之BOM

阳光穿透心脏的1/2处 2022-07-15 05:55 162阅读 0赞

BOM（Browser Object Model）提供了很多对象用于访问浏览器的功能，这些功能与任何网页内容无关。

**8.1 window对象**  
BOM的核心对象是window，它表示一个浏览器实例。在浏览器中，window对象有双重角色，window对象既是JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

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

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

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

8.1.2 窗口关系及框架  
网页中每个框架都有自己独立的window对象，并保存在frames集合中，通过基于0的索引，从做左到右，从上到下或者框架名称访问相应的window对象，window.name是框架名称。

< frame src="frame.htm">

top对象始终指向最外层的框架，也就是浏览器窗口

parent对象指向当前框架的直接上层框架。

self对象始终指向window，可以互换使用。  
这些属性都是windw对象的属性。

8.1.3 窗口位置  
Firefox、Safari、Chrome提供了screenX和screenY属性，IE、Safari、Opera、Chrome提供了screenLeft和screenTop属性，分别表示窗口相对于屏幕左边和上边的位置。

moveTo()接收两个参数：新位置的x，y坐标值；

moveBy()接受两个参数：水平和垂直方向上移动的像素数。这两个方法都不适用于框架，只能对最外层的window对象使用。

8.1.4 窗口大小  
outerWidth、outerHeight返回浏览器本身的尺寸。  
innerWidth、innerHeight返回浏览器页面视图容器的大小。  
chorome中，均返回浏览器页面视图容器的大小。  
IE8及更早版本没有提供获取当前浏览器窗口尺寸的属性，可通过DOM获取。  
document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面视口的信息，标准模式下有效。  
在混杂模式下，必须通过documnent.body.clientWidth和document.body.clientHeight取得相同信息。chrome都可以获取。

resiziTo()和resizeBy()可以调整浏览器窗口大小。  
resiziTo()接收浏览器窗口的新宽度和新高度，resizeBy()接收新窗口与原窗口的宽度与高度之差。

8.1.5 导航与打开窗口  
1 window.open()可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。接收四个参数：

(要加载的URL，窗口目标，一个特性字符串，一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值)  
通常只传递第一个参数，最后一个参数在不打开新窗口的情况下使用。第二个参数是已有窗口或框架的名称。

2 window.open()第三个参数：一个逗号分隔的字符串，表示新窗口中都显示哪些特性。  
fullscreen（yes、no）、height（数值）、left、top、width、scrobare（yes、no）等等，以名值对表示：”height=400,resizeble=yes”。

3 window.open()返回一个指向新窗口的引用。

4 window.close()可以关闭新打开的窗口，该方法仅适用于通过window.open()打开的新窗口。

8.1.6 超时调用和间歇调用  
1 间歇调用是在指定的时间过后执行代码，使用window.setTimeout()方法，接受两个参数：(要执行的代码，执行代码前需要等待的毫秒数)。eg：setTimeout(function()\{\},1000);

在经过指定时间后代码不一定会执行，因为JavaScript是一个单线程序的解释器，因为一定时间内只能执行一段代码，第二个参数告诉JavaScript再经过多少时间把当前任务添加到任务队列中。方法返回一个数值，表示超时调用ID，可以通过调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它，从而取消尚未执行的超时调用代码。

2 间歇调用是指每隔指定的时间就就执行一次代码，调用方式与超时调用一致。使用setInterval()，返回一个间歇调用ID，使用clearInterval()方法传入相应间歇调用ID。

一般使用超时调用来模拟间歇调用是一种最佳模式。

8.1.7 系统对话框  
浏览器通过alert()、confirm()、prompt()方法调用系统对话框向用于显示消息，外观由操作系统和浏览器设置决定，不由CSS决定。

1 alert()生成警告。没有返回值。  
2 confirm()会显示两个按钮：确认、取消，返回布尔值。  
3 prompt()生成提示框，提示用于输入一些文本，显示：确认、取消、本文框。接受两个参数：(显示给用户的文本提示，文本输入域的默认值)，返回输入域的值。

**8.2 location对象**  
location对象是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。location对象提供了与当前窗口中加载的文档有关的信息，还将URL解析为独立的片段：hash、host、hostname、href、pathname、port、protocol、search。设置相应的属性，可以逐段或者整体性地修改浏览器的URL。

window.location与document.location引用的是同一对象。

位置操作：location对象可以通过很多方式改变浏览器位置。其中最常用的方法是设置location.href属性

使用assign()方法并为其传递一个URL，可以立即打开新URL并在浏览器的历史记录中生成一条记录（可以后退），将window.location或location.href设置为一个URL值，也会调用assign()方法。

要禁止后退，可以调用replace()方法，接受导航到的URL参数，且不会在历史记录中生成新记录。

reload()方法以最有效重载当前显示的页面，会从浏览器缓存中重新架子啊，强制服务器重新加载，传递参数true。

**8.3 navigator对象**  
主要用来识别客户端浏览器。eg：navigator.userAgent;返回用户代理字符串。

8.3.1 检测插件  
navigator.plugins;返回浏览器中安装的插件信息的数组，数组中每一项包含下列属性：  
name：插件名字；  
descripttion：插件的文件名；  
filename：插件的文件名；  
length：插件所处理的MIME类型数量。

IE检测插件的唯一方式是使用专有的ActiveXObject类型，并尝试创建一个特定插件的实例。

8.3.2 注册处理程序  
Firefox为navigator对象增加了registerContentHandler()和registerProtocolHandle()方法，可以让一个站点指明它可以处理特定类型的信息。

registerContentHandler()接受三个参数：(要处理的MIME类型，可以处理该MIME类型的页面URL，应用程序名称)。registerProtocolHandle()接受三个参数：(要处理的协议，处理该协议的页面URL，应用程序的名称)

**8.4 screen对象**  
screen对象只用来表明客户端能力，包括浏览器窗口外部的显示器信息，如像素宽度和高度。在测定客户端能力的站点跟踪工具中常用。调整浏览器窗口的大小，使其占据屏幕的可用空间，例如：

window.resizeTo（screen.availWidth,screen.availHeight）;