Javascript高级程序设计

Appearance

导航和打开窗口 ​

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

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

javascript
//等同于< a href="http://www.wrox.com" target="topFrame"></a>
window.open("http://www.wrox.com/", "topFrame");

第二个参数也可以是下列任何一个特殊的窗口名称： _self 、 _parent 、 _top 或 _blank 。

1. 弹出窗口 ​

如果给 window.open() 传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数，那么就会打开一个带有全部默认设置的新浏览器窗口或标签页。

第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。下表列出了可以出现 在这个字符串中的设置选项。

设置值说明
fullscreenyes 或 no表示浏览器窗口是否最大化。仅限IE
height数值表示新窗口的高度。不能小于100
left数值表示新窗口的左坐标。不能是负值
locationyes 或 no表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。如果设置为no，地址栏可能会隐藏，也可能会被禁用（取决于浏览器）
menubaryes 或 no表示是否在浏览器窗口中显示菜单栏。默认值为 no
resizableyes 或 no表示是否可以通过拖动浏览器窗口的边框改变其大小。默认值为 no
scrollbarsyes 或 no表示如果内容在视口中显示不下，是否允许滚动。默认值为 no
statusyes 或 no表示是否在浏览器窗口中显示状态栏。默认值为 no
toolbaryes 或 no表示是否在浏览器窗口中显示工具栏。默认值为 no
top数值表示新窗口的上坐标。不能是负值
width数值表示新窗口的宽度。不能小于100

如下面的例子所示。

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

这行代码会打开一个新的可以调整大小的窗口，窗口初始大小为 400×400 像素，并且距屏幕上沿和左边各 10 像素。

window.open() 方法会返回一个指向新窗口的引用。引用的对象与其他 window 对象大致相似，但我们可以对其进行更多控制。例如，有些浏览器在默认情况下可能不允许我们针对主浏览器窗口调整大小或移动位置，但却允许我们针对通过 window.open() 创建的窗口调整大小或移动位置。通过这个返回的对象，可以像操作其他窗口一样操作新打开的窗口，如下所示。

javascript
var wroxWin = window.open(
  "http://www.wrox.com/",
  "wroxWindow",
  "height=400,width=400,top=10,left=10,resizable=yes",
);
//调整大小
wroxWin.resizeTo(500, 500);
//移动位置
wroxWin.moveTo(100, 100);
//调用 close() 方法还可以关闭新打开的窗口。
wroxWin.close();
alert(wroxWin.closed); //true

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

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

在 Chrome中，将新创建的标签页的 opener 属性设置为 null

2.安全限制 ​

曾经有一段时间，广告商在网上使用弹出窗口达到了肆无忌惮的程度。他们经常把弹出窗口打扮成系统对话框的模样，引诱用户去点击其中的广告。由于看起来像是系统对话框，一般用户很难分辨是真是假。为了解决这个问题，有些浏览器开始在弹出窗口配置方面增加限制。

有的浏览器只根据用户操作来创建弹出窗口。这样一来，在页面尚未加载完成时调用window.open() 的语句根本不会执行，而且还可能会将错误消息显示给用户。换句话说，只能通过单击或者击键来打开弹出窗口。

3. 弹出窗口屏蔽程序 ​

大多数浏览器都内置有弹出窗口屏蔽程序，用户可以将绝大多数不想看到弹出窗口屏蔽掉。

于是，在弹出窗口被屏蔽时，就应该考虑两种可能性。如果是浏览器内置的屏蔽程序阻止的弹出窗口，那 么 window.open() 很可能会返回 null 。此时，只要检测这个返回的值就可以确定弹出窗口是否被屏蔽了，如下面的例子所示。

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

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

javascript
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!");
}