js在新窗口打开链接

js在新窗口打开链接

一、总结

一句话总结：

1、【Window.open()】方法，比如如下代码，将打开baidu首页。window.open("http://www.baidu.com")。但是这个方法是有问题的，那就是【有些浏览器会拦截】。

2、【模拟form表单提交】来打开一个新的页面；它的主要思路就是动态构建一个隐藏的form表单，将其【target设为“_blank”】,然后在动态构建起表单参数，最后手动触发起click事件。

3、其实也可以模拟a标签点击：可以【直接后台获取链接后放入一个a标签】，然后【js触发a标签点击】即可，和第二种方法的原理是一样的

举个例子，我们要在一段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();

 

1、jquery封装成一个插件实例？

【$.extend】来扩展：$.extend({open_page: function(url, param) {}});

【$.】调用：$.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);

 

 

二、在js中实现新窗口打开页面

转自或参考：在js中实现新窗口打开页面
https://www.cnblogs.com/roy-blog/p/8627895.html

我们都知道可以在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，否则浏览器还是会拦截上述弹窗。