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

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

转载于:https://www.cnblogs.com/roy-blog/p/8627895.html

在js中实现新窗口打开页面相关推荐

vue 按钮点击打开新页面_Vue中在新窗口打开页面及Vue-router的使用
背景在开发提分加项目的过程中,遇到了点击下拉菜单时在新窗口中打开页面,由于之前一直做的是单页面应用,没有碰到过类似的需求,于是上网搜了一下解决办法,也再次系统地温习了一下vue-router. 解决 ...
在js中实现新窗口打开
实现跳转页面的3个方法 1.<a href="xxxx" target="_blank"></a>2.window.open(" ...
vue是用a标签打开新页面_vue | 路由vue-router在新窗口打开页面
vue的是单页面应用设计的渐进式框架,但是有时在项目中也会出现新窗口打开页面的情况,此时,就需要vue-router的知识来解决一.使用标签需要注意的是,router-link并不支持 targe ...
js中屏蔽a标签右键中在新窗口打开功能
一.在现实开发中,开发人员需要对某些a标签的在新窗口打开进行屏蔽. 这时候问题就来了,我们该如何去屏蔽,是用js直接屏蔽a标签的右键事件呢,还是去修改本地的浏览器右键事件(不现实),我们不可能要求用户 ...
vue-router 如何在新窗口打开页面
1. <router-link>标签实现新窗口打开: 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> ...
vue-router 设置路由在新窗口打开页面
一. <router-link>标签实现新窗口打开: 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> ...
点击链接新窗口打开页面
列表页面,要是没有内页得话,就新窗口打开一个页面,-------要是有的话在点击列表页得就覆盖打开的窗口页面使用的标签是 target="_block" 要是想一直打开在新窗 ...
vue是用a标签打开新页面_vue 在新窗口打开页面并设置不同的背景
开发一个新系统,前端用的vue,vue是单体应用,所有页面都在一个窗口里实现,但项目要求在点button链接后要新打开一个浏览器页面,解决方法如下: 1. 给此button设置新事件 @click=& ...
a标签新窗口打开页面跳转sessionStorage丢失
Chrome更新89版本后,sessionStorage丢失a标签跳转丢失sessionStorage 最简单的解决办法 - a标签添加属性 rel="opener" Chrome ...

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

在js中实现新窗口打开页面相关推荐

最新文章

热门文章