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

我们平时开发web前端或者使用JS的朋友都会遇到需要打开新窗口的情况,使用传统的window.open(),会被大多数浏览器拦截,这是因为现在大部分浏览器都有弹出窗口拦截功能,所以window.open()不再那么好用了。

我最近也遇到了这样的问题,所以就把弹出新窗口的方法分享给大家。欢迎大家补充哦...


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

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

      <span style="font-size:14px;">document.getElementById("msgTxt").innerHTML="<form id='hiddenlink' action='"+sHref+"' target='_blank'><input type='hidden' name='object'         value='"+objValue+"'></form>";
      var s=document.getElementById("hiddenlink");
      s.submit();</span>
不过模拟表单提交的方法经有可能也会被阻止...

第三种、模拟超链接(<a>)被点击

当按下一个按钮时,想打开一个新的标签页,可以模拟链接被按下,然后打开链接。
但是在jQuery中,使用a.click(), a.trigger('click')等都不会引起链接默认事件被执行。
下面的代码模拟生成了链接点击事件,然后执行默认打开链接的事件。 

不过值得注意的一点是:对应IE浏览器,只有IE9以上才支持document.createEvent函数,所以以下代码在IE执行的话要IE9以上才行

   <span style="font-size:14px;">  var a = $("<a href='http://www.test.com' target='_blank' >test</a>").get(0);
     var e = document.createEvent('MouseEvents');
     e.initEvent('click', true, true);
     a.dispatchEvent(e);</span>

第四种、利用浏览器的冒泡事件(转载来的)

<span style="font-size:14px;">    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);
        });
    }</span>

  1). 首先,说一下最终的效果,是实现用 “A” 包含你要触发弹窗的元素,原来的click事件要返回弹窗的URL 对应这一句 “returnData = f.apply(this, arguments);”
  2). 然后就要说到弹窗拦截的策略了,具体我就不说了,反正 策略里是不会拦截 “A” 本身吧
  3). 最后就是合成了,用A包含后,因为事件会冒泡,所以利用正常的点击,生成动态的 链接地址 给A,触发A的原始点击事件,就完成了

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值