我们都知道可以在 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);
来源: https://www.cnblogs.com/roy-blog/p/8627895.html