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