QQ登录
微博登录
GitHub登录JS弹出新窗口被拦截的解决方法
在Web编程中，使用JS在新窗口打开页面的时候，会遇到被浏览器拦截的情况，那么，我们如何才能让JS打开新窗口不被浏览器阻止呢？
一、问题一
一般情况下，如果直接在js中调用window.open()函数去打开一个新窗口，浏览器会对弹出的窗口进行拦截，因为浏览器会把该窗口认为是弹出广告等用户不想得到的窗体。
1、解决方法
把window.open()函数改为由用户主动点击时触发，在超链接里加入onclick事件，这样浏览器就认为是用户想访问这个页面，而不是直接弹出给用户
2、例如：
<a href="javascript:void(0)" onclick="window.open()"></a>
这样用户点击这个超链接，浏览器会认为它是打开一个新的链接，所以就不会拦截。
二、问题二
使用ajax处理数据，当点击获取数据后，再跳转到新页面，这时就会被浏览器拦截。
1、解决方法
先用window.open打开一个窗口，然后修改该窗口地址。
2、例如
var tempwindow=window.open(); tempwindow.location='/jump/new';
正常对于浏览器新开窗口有三种方式
1、html里a标签的target属性
<a href="./open.html" target="_blank">点击</a>
2、javascript的window.open()方法
let url = "./open.html"; window.open(url);
3、html里form表单的target属性
<form action="./open.html" method="post" target="_blank"> <input name="username" value="username" /> <input type="submit" value="submit" /> </form>
问题分析
首先a标签另开页面是没有什么问题 但是如果在ajax回调函数里使用window.open()的话就会被拦截 * form表单使用target="_blank"必拦截*
原因大概是因为请求头里没有源地址吧 所以浏览会把这个请求当做广告处理，如果你不设置浏览器弹窗权限的话是会被拦截掉的。
解决方法
1、把javascript的window.open()声明成一个js对象,然后把指向的地址赋值给其location属性（注意如果是在Ajax回调函数里使用的话，一定要设置async成false，否则还是会被拦截掉）
let url = "./open.html"; let open = window.open(); open.location = url;
2、如果是用html里form表单的target属性就稍微麻烦一点点了，需要一个中间页面，还有就是，得监控这个form表单的submit事件
我当时是需要点击一个按钮，做一个数据提交然后展示相应的结果，要求是要重新开一个页面展示 然后我就只能是创建一个form表单对象，然后append到页面上，再用上面的window.open(),再在新开的页面上使用window.opener.document对象操作父页面的元素达到效果
原理就是在提交表单之前先append到页面上 再用上面的window.open()方法新开页面,再在新开的页面上使用window.opener.document对象操作父页面的刚刚append的form表单append到中间页面，然后直接提交表单就可以啦，至于为什么还要先append到本页面是因为，现在谷歌浏览器是不能提交在页面节点元素里不存在的表单，就是说，无论是js还是jq对象形式的表单不能直接提交，必须先在页面节点元素里存在。
openFormTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>openFormTest</title>
</head>
<body>
<a href="javascript:;" onclick="openFormTest();">表单</a>
</body>
<script type="text/javascript">
function openFormTest() {
let form = document.createElement("form");
form.setAttribute("action", "./open.html");
form.style.display = "none";
document.getElementsByTagName("body")[0].appendChild(form);
let open = window.open();
open.location = "./openTemp.html";
document.parent.appendChild(form);
//form.submit();
}
</script>
</html>openTemp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body></body>
<script type="text/javascript">
$(function () {
var $form = $(window.opener.document).find("form:last");
$form.appendTo("body");
$form.submit();
});
</script>
</html>参考：
https://blog.csdn.net/qq_39725929/article/details/88865928
https://www.jb51.net/article/90160.htm
本站文章除注明转载/出处外，均为原创，若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站，谢谢合作。本站邮箱：admin@only4.work
尊重他人劳动成果，共创和谐网络环境。点击版权声明查看本站相关条款。
