用JS打开新窗口，防止被浏览器阻止的方法

资料来源：网络整理时间：2023/2/14 0:04:13 共计：3597 浏览

用JS打开新窗口，防止被浏览器阻止的方法

相信做web前端或者使用JS的朋友都会遇到需要在新窗口打开页面的情况，现在浏览器大都具有弹出窗口拦截功能，所以传统的window.open()不再那么好用了。借鉴于网上查到的方法和我个人的实践，把弹出新窗口的方法给大伙都介绍一下。

第一种、使用原生javascript的window.open()方法（大部分情况下会被浏览自阻止）

第二种、模拟表单(form)提交，原理是指定表单的action为想要打开的URL地址，target设置为"_blank"

不过模拟表单提交的方法经很多网友反映说也会被阻止

第三种、模拟超链接(<a>)被点击，用jquery的写法如下，注意最后openLink[0]是模拟的原生DOM对象被点击的（使用Jquery对象的话没反应）

var openLink = $("");
openLink.attr('href', 'URL地址');
openLink[0].click();

这种方法个人比较推荐的，因为简单方便

第四种、利用浏览器的冒泡事件（这种方法稍微有点复杂，呵呵）

clickOpenWin: function(f){
    var dataKey = "clickOpenWin.dataKey"
    var me = $(this);
    var A = me.data(dataKey);

    var returnData = null;
    if(!A){
        A = $("");
        me.data(dataKey, A);
        A.click(function(e){
            if(returnData){
                A.attr("href", returnData);
            }else {
                A.before(me);
                e.stop();
            }
        });
    }
    me.mouseover(function(){$(this).before(A).appendTo(A);});
    me.mouseout(function(){A.before($(this));});
    me.click(function(){
        A.attr("href", "#|");
        returnData = f.apply(this, arguments);
    });
}

1. 首先，说一下最终的效果，是实现用 “A” 包含你要触发弹窗的元素，原来的click事件要返回弹窗的URL 对应这一句 “returnData = f.apply(this, arguments);”

2. 然后就要说到弹窗拦截的策略了，具体我就不说了，反正策略里是不会拦截 “A” 本身吧

3. 最后就是合成了，用A包含后，因为事件会冒泡，所以利用正常的点击，生成动态的链接地址给A，触发A的原始点击事件，就完成了

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：js 正则匹配（去掉html标签） | ·下一条：js 实现弹出新窗口，但是不被浏览器阻止