JavaScript BOM window对象

2018-06-08 本文已影响8人易之108

BOM 是浏览器对象模型。

window 对象

双重角色，通过JavaScript 访问浏览器窗口的接口，ECMAScript 规定的Global对象。

全局作用域

在全局作用域中生成的变量和函数，都会变成window的变量和函数。

var a = 123;
window.a // 123

直接在window 上添加属性，也可以仅仅通过属性名访问

window.b = 123;
b // 123

他们的不同点在于通过window 创建的属性可以使用delete 删除。直接创建的属性，则不行。
注1 在ES6中，更新了这点的设置。使用var function 生成的变量，函数还是window 的属性。而使用let 和 const 生成的变量则不会被添加到 window 上。

窗口关系及框架

如果页面中包含框架。每个框架都会有直接的window对象，保存在frames 中。可以通过下标或者框架名称来访问。
使用top 来访问框架更好一些。
top 对象始终指向最外层的框架，也就是浏览器窗口。
如果代码在框架中可以使用parent 来指向上一层的框架，最外层就是top。

窗口位置

导航和打开窗口

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

如果指定了第二个参数，且该参数是已有窗口或框架的名称，那就会该名称的窗口或框架中加载第一个参数指定的URL。
第二个参数也可以是 _self(当前窗口，默认值) _parent(父窗体)_top(当前窗体，并替换整个框架)_blank(新窗体)

弹出窗口

如果window.open()第二个参数不是一个已经存在的窗口或框架，那么就会根据第三个参数位置上的传入字符串创建一个新的窗口或新标签页。在不打开新窗口的情况下会忽略第三个参数。

参数3的选项.png

例如

window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");

安全限制

因为历史上广告商在网上使用弹出窗口达到了肆无忌惮的地步，所以浏览器开始对弹出窗口配置方面增减了限制。

弹出窗口屏蔽程序

大多数浏览器都内置有弹出窗口屏蔽程序。
如果是浏览器内置的屏蔽程序阻止的弹出窗口，window.open() 很可能返回null
如果是浏览器扩展程序或者其他程序阻止弹出窗口，window.open() 通常会抛出一个错误

var blocked = false;
try {
   var wroxWin = window.open("http://www.wrox.com", "_blank");
   if (wroxWin == null){
      blocked = true;
   }
} catch (ex){
   blocked = true;
}
if (blocked){
   alert("The popup was blocked!");
}

这样就可以确定弹出窗口是否被屏蔽。

间歇调用和超时调用

超时调用（setTimeout()）接受两个参数，要执行的代码和以毫秒表示的时间。第一个参数可以是，字符串和函数。但不建议使用字符串。

setTimeout(function(){
  alert('ss')
},1000);

第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。JavaScript 是一个单线程的解释器。在一定时间内只能执行一段代码，有一个JavaScript 的任务队列。这些任务会按照添加他们到队列的顺序执行。setTimeout 的第二个参数告诉JavaScript 过多久将当前任务添加到队列中，如果队列是空的，那么就会马上执行。如果不是，就会把队列之前的任务都执行完毕，才会执行。
调用 setTimeout() 会返回一个数值ID。可以通过clearTimeout()方法来取消尚未执行的超时计划。

var timeoutId =  setTimeout(function(){
  alert('ss')
},1000);
clearTimeout(timeoutId );

间隙调用和超时调用类似，不过他会每隔指定时间调用代码，直到间隙被取消或者页面卸载。
通过 setInterval() 创建，参数与setTimeout()相同

setInterval(function(){
  alert('yy');
},1000);

如同 setTimeout 相同，也会返回一个间隙调用的ID 通过 clearInterval()方法可以取消。
另外可以在一次超时调用中，创建另外一次超时调用，这样递归下去。也就说可以通过超时调用来实现间隙调用。这样的原因也是因为JavaScript 的执行队列。因为可能还没有执行上一个间隙调用传入的方法，就可能将下一个方法添加到队列中。

系统对话框

这些对话框是同步和模态的。也就是说，在显示这些对话框是，代码会停止执行，关闭之后，回复执行

alert()

接受一个参数，参数就是提示用户的信息。
只有一个确定或关闭按钮。
没有返回值。

confirm()

让用户来决定是否执行给定操作。
接受一个参数，参数是提示用户的信息。
有两个按钮一个确定，一个取消。如果用户点击确定返回true，点击取消返回false。可以借此判断用户是否允许。如果用户点击了右上角的X按钮，返回的也是false。

prompt()

接收2两个参数，第一个参数用来提示用户，第二个参数是输入框中的默认值。
除提示信息，确定和取消按钮外，还有一个输入框。
点击确定返回值是，输入框中的信息，点击取消或X按钮，返回null
大多数浏览器在打开两个或多个对话框时，对弹出一个复选框，允许用户可以阻止后续的对话框显示。用户刷新页面后重置
另外通过 find()查找和 print()打印方法可以打开对话框。

window.find();// 自己尝试，并没有弹出，IE11 和谷歌都失败。
window.print();