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地址

 

 

posted on 2014-08-09 19:29  Hellohuman  阅读(1673)  评论(0)  编辑  收藏  举报

导航