小墨の博客

梦想需要付诸行动,否则只能是梦

关于浏览器拦截弹出窗口问题的解决方法

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

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

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:512
    • 页面总数:20
    • 分类总数:92
    • 标签总数:208
    • 评论总数:62
    • 浏览总数:235404

    | | |
    | |  Z-Blog PHP