我们都知道可以在html代码中使用<a href=”xxxx” target=”_blank”></a>这种方式来打开一个新的窗口打开一个页面，但是有很多时候，我们需要在某段js代码中去打开一个新的窗口实现页面跳转。有如下几种方法来实现这个功能。

1.Window.open()方法，比如如下代码，将打开baidu首页。

window.open("http://www.baidu.com")

但是这个方法是有问题的，那就是有些浏览器会拦截。所以我们需要第二种方法，也是本文主要介绍的方法。

2.模拟form表单提交来打开一个新的页面

它的主要思路就是动态构建一个隐藏的form表单，将其target设为“_blank”,然后在动态构建起表单参数，最后手动触发起click事件。

举个例子，我们要在一段js代码中打开http://www.baidu.com?a=1这个链接。我们可以用如下的代码来实现。

//js代码
var form=\'<form action="https://www.baidu.com" target="_blank" id="windowOpen" style="display:none">\';
form+=\'<input name="a" value=1 />\';
form+=\'</form>\';
$(\'body\').append(form);
$(\'#windowOpen\').submit();
$(\'#windowOpen\').remove();

当然，我们可以将上述代码封装成一个函数，函数传入两个参数，一个是url，另外一个是参数param,其中param是一个js对象。

 function open_page(url, param) {
        var form = \'<form action="\' + url + \'"  target="_blank"  id="windowOpen" style="display:none">\';
        for(var key in param) {
            form += \'<input name="\' + key + \'" value="\' + param[key] + \'"/>\';
        }
        form += \'</form>\';
        $(\'body\').append(form);
        $(\'#windowOpen\').submit();
        $(\'#windowOpen\').remove();
    }

这样，我们就可以这样来调用函数了。

var url=\'https://www.baidu.com\'；
var param={a:1};
open_page(url,param);

甚至，我们可以将它封装成一个插件，以后我们就可以直接调用这个插件了。

//模拟form表单提交打开新的页面
$.extend({
    open_page: function(url, param) {
        var form = \'<form action="\' + url + \'"  target="_blank"  id="windowOpen" style="display:none">\';
        for(var key in param) {
            form += \'<input name="\' + key + \'" value="\' + param[key] + \'"/>\';
        }
        form += \'</form>\';
        $(\'body\').append(form);
        $(\'#windowOpen\').submit();
        $(\'#windowOpen\').remove();
    }
});

调用方法如下：

var url=\'https://www.baidu.com\'；
var param={a:1};
$.open_page(url,param);

 PS：需要注意的是，如果是在ajax回调函数中调用上述方法，需要将async设置为false，否则浏览器还是会拦截上述弹窗。

版权声明：本文为roy-blog原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/roy-blog/p/8627895.html