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
尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。