2018-12-12

8.1.5 导航和打开窗口

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

通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用

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

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

调用这行代码，就如同用户单击了href属性为http://www.wrox.com，target属性为“topFrame”的链接。如果有一个名叫“topFrame”的窗口或者框架，就会在该窗口或框架加载这个URL；否则，就会创建一个新窗口并将其命名为“topFrame”。此外，第二个参数也可以是下列任何一个特殊的窗口名称：_self、_parent、_top和blank。

1、弹出窗口

如果给window.open（）传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或标签页。
如果没有传入第三个参数，那么就会打开一个带有全部默认设置（工具栏、地址栏和状态栏等）的新浏览器窗口（或者打开一个新标签页——根据浏览器设置）。在不打开新窗口的情况下，会忽略第三个参数。
第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。下表流出了可以出现在这个字符串中的设置选项：

image.png

表中所列部分或全部设置选项，都可以通过逗号风格的名值对列表来指定。例：

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


//调整大小
wroWin,resizeTo(500,500);

//移动位置
wroxWin.moveTo(100,100);

//调用close()方法还可以关闭新打开的窗口
wroxWin.close();


//上面这方法仅适用于通过window.open（）打开的弹出窗口
//对于浏览器的主窗口，如果没有得到用户的允许是不能关闭它的。
//不过弹出窗口可以调用top.close（）在不经用户允许的情况下关闭自己

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

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




wroxWin.opener = null;
//将opener属性设置为null就是告诉浏览器新创建的标签页不需要与打开它的标签页通信
//因此可以在独立的进程中运行
//标签页之前的联系一旦切断，将没有办法恢复。

2、安全限制

广告商经常会把弹出窗口大班成系统对话框的模样，引诱用户去点击其中的 广告。为了解决这个问题，有写浏览器开始在弹出窗口配置方面增加限制。

有的浏览器只根据用户操作来创建弹出窗口。
这样一来，在页面尚未加载完成时调用window.open（）的语句根本不会执行，而且还可能会将错误消息显示给用户。简而言之，就是只能通过单击或者击剑来打开弹出窗口
对于那些不是用户有意打开的弹出窗口，Chrome采取了不同的处理方式。它不会像其他浏览器那样简单的屏蔽这些弹出窗口，而是只显示他们的标题栏，并把他们放在浏览器窗口的右下角。

在打开计算机硬盘中网页时，IE会解除对弹出窗口的某些限制。但是在服务器中执行这些代码会受到对弹出窗口的限制。

3、弹出窗口屏蔽程序

大多数浏览器都内置有弹出窗口屏蔽程序。
在弹出窗口被屏蔽时，应该考虑两种可能性：

1、如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么window.open（）很可能会返回null。
此时只要检测这个返回的值就可以确定弹出窗口是否被屏蔽了，例：

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

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

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("Thepopup was blocked!");
            }
}

在任何情况下，以上代码都可以检测出调用window.open（）打开的弹出窗口是不是被屏蔽了。
但要注意的是，检测弹出窗口是否被屏蔽只是一方面，它并不会阻止浏览器显示与被屏蔽的弹出窗口有关的消息。