window.open方法解析

一、前言

最近在项目中需要新窗口打开一个第三方的页面，大家都知道，使用window.open打开新窗口某些情况下会被浏览器的屏蔽程序阻止。如果要打开的URL是通过AJAX获取的，就一定会被浏览器拦截。为了解决这个问题，温习了window.open的详细用法。记录下来备忘。

 

二、window.open有两个用途

（1）、导航到指定的URL

（2）、打开一个新窗口。该应用场景比较常见。

先看一个完整示例，打开招商银行大众版：

var cmbBankWin = window.open('https://pbsz.ebank.cmbchina.com/CmbBank_GenShell/UI/GenShellPC/Login/Login.aspx', 'newhb', 'menubar=no,toolbar=no,location=no,directories=no,scrollbars=yes,status=yes,resizable=yes');

三、参数说明

参数一、要加载的URL

参数二、窗口目标。在该名称的窗口或框架中加载第一个参数指定的URL。如果该参数指定的窗口不存在，则会按照第三个特性参数创建新窗口或者新标签页。如果没有第三个参数则创建默认窗口（工具栏、地址栏、状态栏）。

参数三、特性字符串。示例：height=400,width=400,top=10,left=10

参数四、新页面是否取代浏览器历史记录中当前加载页面的布尔值。只在不打开新窗口的情况下使用该参数。

 

四、第三个参数支持的特性值：

fullscreen 是否最大化打开。仅IE有效。

height

width

top

left

location 是否显示地址栏

scrollbars 内容在视口中显示不下，是否允许滚动

status 是否显示状态栏

toolbar 是否现在工具栏

menubar 是否显示菜单栏

resizable 是否可以通过拖拽浏览器边框改变窗口大小

 

五、操作打开的新窗口

cmbBankWin.resizeTo(500, 500);

cmbBankWin.moveTo(100, 100);

cmbBankWin.close() 该方法仅适用于通过window.open打开的新窗口，对于浏览器的主窗口，未得到用户允许不能关闭。

 

六、返回值说明

window.open会返回指向新窗口的引用

 

七、新窗口与原始窗口之间的引用关系

获取原始窗口的引用

cmbBankWin.opener

有些刘浏览器（IE8、chrome）会在独立的进程中运行新的标签页。如果一个标签页打开另一个标签页，如果两个window对象之间需要彼此通信，那么新开的标签页就不能在独立的进程中运行。在chrome中，将新创建的标签页的opener属性设置为null，即表示在单独的进程中运行新标签页。如：cmbBankWin.opener = null

 

八、安全限制

浏览器厂商为了让用户免受广告弹窗的骚扰，采取了以下措施：

不允许修改状态栏

不允许将弹出窗口移动到屏幕以外

不允许在屏幕之外创建弹出窗口

 

九、弹出窗口屏蔽程序

很多浏览器都有弹出窗口屏蔽程序，还有很多浏览器插件可以屏蔽弹出窗口，比如Yahoo!Toolbar

写一段检测弹出窗口被屏蔽的程序：

function isBlocked(){
    var blocked = false;
    try{
        var cmbBankWin = window.open('https://pbsz.ebank.cmbchina.com/CmbBank_GenShell/UI/GenShellPC/Login/Login.aspx', 'newhb', 'menubar=no,toolbar=no,location=no,directories=no,scrollbars=yes,status=yes,resizable=yes');
        if(cmbBankWin == null){
            blocked = true;
        }
    }catch(ex){
        blocked = true;
    }

    return blocked;
}

 

十、如何绕过浏览器的屏蔽程序，顺利打开一个新窗口？

（1）、手动修改浏览器的安全级别：

不同的浏览器修改安全级别的方式不同，以下为chrome解除阻止的方式：

步骤一、

 

步骤二、

 

步骤三、

步骤四、

 

 

（2）、但是作为技术人员，我们需要通过脚本解决问题，而不是提示用户去修改自己的浏览器设置。以下措施是我们常用的方法：

1、动态创建A标签，取到URL后设置A标签的href属性，用脚本调用A标签的click事件。

2、动态创建Form表单，target属性设置为_blank，method属性为get。用脚本提交表单。注意通过这种方式打开的URL无法携带参数，传递参数需要通过隐藏域（input type='hidden'）来做。代码如下：

function openNewWin (url) {
        var r = document.documentElement;
        var f = document.createElement("form");
        f.target = "_blank";
        f.method = "get";
        setParams(url);
        r.insertBefore(f, r.childNodes[0]);
        f.action = url;
        f.submit();
        
        $(f).remove();
        
        function setParams(url){
            var paramsObj = $T.Url.getQueryObj(url);
            var inputTemplate = '<input type="hidden" name="{0}" value="{1}" />';
            for(var name in paramsObj){
            if(paramsObj.hasOwnProperty(name)){
            $(f).append($TextUtils.format(inputTemplate, [name, paramsObj[name]]));
            }
            }
        }
    }

3、通过以上两种方式，如果URL是通过AJAX获取的chrome浏览器仍然会阻止，IE8不会。可用以下方式解决：

步骤一、

先弹出新窗口

 

步骤二、

 AJAX返回地址后再改变新窗口的location.href属性

 

完整的代码示例如下：

var newWin = window.open('about:blank'); // 先弹出新窗口
var options = {};
options.success = function(url){
    newWin.location.href = url; // AJAX返回地址后再改变新窗口的location.href属性
};
options.error = function(result){
   console.log(result); 
};
self.model.getUrl(options);// 异步获取URL地址