用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的原始点击事件,就完成了

欢迎分享本文,转载请保留出处:前端ABC » 用JS打开新窗口,防止被浏览器阻止的方法

赞 (0)
分享到:更多 ()

发表评论 0