第8章BOM

Posted 2020-09-01

8.1window对象

8.1.1全局作用域

定义全局变量与在window对象上直接定义属性还是有一点差别：全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以。

8.1.2窗口关系及框架

window.top: 指定最高（最外）层的框架 window.parent:指向当前框架的直接上层框架，在某些情况下，parent有可能等于top

8.1.3窗口位置

使用下列代码可以跨浏览器取得窗口左边和上边的位置：

 

var leftPos = (typeof window.screenLeft =="number" )? window.screenLeft : window.screenX;

 

var topPos = (typeof window.screenTop =="number") ? window.screenTop:window.screenY;

 

console.log(leftPos);

console.log(topPos);

8.1.4窗口大小

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

8.1.5导航和打开窗口

使用 window.open() 方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。这个方法可以接收4个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。

 

如果为 window.open() 传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的 URL。

1. 弹出窗口

如果给 window.open() 传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数，那么就会打开一个带有全部默认设置（工具栏、地址栏和状态栏等）的新浏览器窗口（或者打开一个新标签页）。在不打开新窗口的情况下，会忽略第三个参数。第三个参数是一个逗号分隔的设。window.open() 方法会返回一个指向新窗口的引用。引用的对象与其他 window 对象大致相似，但我们可以对其进行更多控制。例如，有些浏览器在默认情况下可能不允许我们针对主浏览器窗口调整大小或移动位置，但却允许我们针对通过window.open()创建的窗口调整大小或移动位置。通过这个返回的对象，可以像操作其他窗口一样操作新打开的窗口，如下所示。

 

var win = window.open("http://shijiajie.com/","newWindow",

    "height=400,width=400,top=10,left=10,resizable=yes");

 

// 调整大小

win.resizeTo(500,500);

 

// 移动位置

win.moveTo(100,100);

 

// 关闭窗口

win.close();

但是，close() 方法仅适用于通过 window.open() 打开的弹出窗口。对于浏览器的主窗口，如果没有得到用户的允许是不能关闭它的。

 

新创建的 window 对象有一个 opener 属性，其中保存着打开它的原始窗口对象。这个属性只在弹出窗口中的最外层 window 对象（top）中有定义，而且指向调用 window.open() 的窗口或框架。例如：

 

var win = window.open("http://shijiajie.com/","newWindow",

    "height=400,width=400,top=10,left=10,resizable=yes");

 

console.log(win.opener === window);   // true

虽然弹出窗口中有一个指针指向打开它的原始窗口，但原始窗口中并没有这样的指针指向弹出窗口。窗口并不跟踪记录它们打开的弹出窗口，因此我们只能在必要的时候自己来手动实现跟踪。

3. 弹出窗口屏蔽程序

 

曾经有一段时间，广告商在网上使用弹出窗口达到了肆无忌惮的程度。他们经常把弹出窗口打扮成系统对话框的模样，引诱用户去点击其中的广告。由于看起来像是系统对话框，一般用户很难分辨是真是假。为了解决这个问题，大多数浏览器内置有弹出窗口屏蔽程序，将绝大多数用户不想看到弹出窗口屏蔽掉。

 

于是，在弹出窗口被屏蔽时，就应该考虑两种可能性。如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么 window.open() 很可能会返回 null，如果是浏览器扩展或其他程序阻止的弹出窗口，那么 window.open() 通常会抛出一个错误。因此，要想准确地检测出弹出窗口是否被屏蔽，必须在检测返回值的同时，将对 window.open() 的调用封装在一个 try-catch 块中

8.1.6间歇调用和超时调用

javascript 是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

 

超时调用需要使用 window 对象的 setTimeout() 方法，它接受两个参数：要执行的代码和以毫秒表示的时间（即在执行代码前需要等待多少毫秒）。其中，第一个参数可以是一个包含 JavaScript 代码的字符串（就和在 eval() 函数中使用的字符串一样），也可以是一个函数。例如，下面对 setTimeout() 的两次调用都会在一秒钟后显示一个警告框。虽然这两种调用方式都没有问题，但由于传递字符串可能导致性能损失，因此不建议以字符串作为第一个参数。

 

第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。JavaScript 是一个单线程序的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个 JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。setTimeout() 的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

 

调用 setTimeout() 之后，该方法会返回一个数值 ID，表示超时调用。这个超时调用 ID 是计划执行代码的唯一标识符，可以通过它来取消超时调用。要取消尚未执行的超时调用计划，可以调用 clearTimeout() 方法并将相应的超时调用 ID 作为参数传递给它，只要是在指定的时间尚未过去之前调用 clearTimeout()，就可以完全取消超时调用。前面的代码在设置超时调用之后马上又调用了 clearTimeout()，结果就跟什么也没有发生一样。

 

间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是 setInterval()，它接受的参数与 setTimeout() 相同：要执行的代码（字符串或函数）和每次执行之前需要等待的毫秒数。调用 setInterval() 方法同样也会返回一个间歇调用 ID，该 ID 可用于在将来某个时刻取消间歇调用。要取消尚未执行的间歇调用，可以使用 clearInterval() 方法并传入相应的间歇调用 ID。取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载。在使用超时调用时，没有必要跟踪超时调用 ID，一般认为，使用超时调用来模拟间歇调用的是一种最佳模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像前面示例中那样使用超时调用，则完全可以避免这一点。最好不要使用间歇调用。

8.1.7系统对话框

浏览器通过 alert()、confirm() 和 prompt() 方法可以调用系统对话框向用户显示消息。系统对话框与在浏览器中显示的网页没有关系，也不包含 html。它们的外观由操作系统及（或）浏览器设置决定，而不是由 CSS 决定。此外，通过这几个方法打开的对话框都是同步和模态的。也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。

 

第一种对话框是调用 alert() 方法生成的。它向用户显示一个系统对话框，其中包含指定的文本和一个 OK（“确定”）按钮。通常使用 alert() 生成的“警告”对话框向用户显示一些他们无法控制的消息，例如错误消息。而用户只能在看完消息后关闭对话框。

 

第二种对话框是调用 confirm() 方法生成的。从向用户显示消息的方面来看，这种“确认”对话框很像是一个“警告”对话框。但二者的主要区别在于“确认”对话框除了显示OK按钮外，还会显示一个 Cancel（“取消”）按钮，两个按钮可以让用户决定是否执行给定的操作。

 

为了确定用户是单击了OK还是Cancel，可以检查 confirm() 方法返回的布尔值：true 表示单击了OK，false 表示单击了Cancel或单击了右上角的 X 按钮。

8.2location 对象

location 对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是 document 对象的属性；换句话说，window.location 和 document.location 引用的是同一个对象。location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将 URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。下表列出了 location 对象的所有属性。

8.2.1查询字符串参数

location.search 返回从问号到 URL 末尾的所有内容，但却没有办法逐个访问其中的每个查询字符串参数。

8.2.2位置操作

使用 location 对象可以通过很多方式来改变浏览器的位置。首先，也是最常用的方式，就是使用 assign()方法并为其传递一个 URL，如果是将 location.href 或 window.location 设置为一个URL值，也会以该值调用 assign() 方法。

在这些改变浏览器位置的方法中，最常用的是设置 location.href 属性。

另外，修改 location 对象的其他属性也可以改变当前加载的页面。

screen 对象

用处不大，screen 对象基本上只涌来表明客户端的能力：

 

availHeight    返回显示屏幕的高度 (除 Windows 任务栏之外)。

availWidth    返回显示屏幕的宽度 (除 Windows 任务栏之外)。

 

height    返回显示屏幕的高度。

width    返回显示器屏幕的宽度。

 

bufferDepth    设置或返回调色板的比特深度。

colorDepth    返回目标设备或缓冲器上的调色板的比特深度。

 

deviceXDPI    返回显示屏幕的每英寸水平点数。

deviceYDPI    返回显示屏幕的每英寸垂直点数。

logicalXDPI    返回显示屏幕每英寸的水平方向的常规点数。

logicalYDPI    返回显示屏幕每英寸的垂直方向的常规点数。

fontSmoothingEnabled    返回用户是否在显示控制面板中启用了字体平滑。

 

pixelDepth    返回显示屏幕的颜色分辨率（比特每像素）。

updateInterval    设置或返回屏幕的刷新率。

history 对象

可以通过 history 对象借由用户访问过的页面列表，在不知道实际 URL 的情况下实现后退和前进。

 

go()方法

接收一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转，正数表示向前跳转。如：

 

history.go(-1); //后退一页

history.go(1); //前进一页

history.go(3); //前进三页

也可以传递给该参数一个字符串，如：

 

history.go("baidu.com"); //跳转到最近的 baidu.com 页面

back()和forward()方法

这两个方法可以模仿浏览器的后退和前进按钮如：

 

history.back(); //后退一页

length属性

该属性保存着历史纪录的数量。对于加载的第一个页面而言，history.length 为0，通过下面的代码可以测试该属性的值，可以确定用户是否一开始就打开了你的页面：

 

if (history.length == 0){

    //第一个页面

}

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