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


Posted in Javascript onJanuary 03, 2015

本文实例讲述了JS打开新窗口防止被浏览器阻止的方法。分享给大家供大家参考。具体分析如下:

用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器阻止呢?其实办法还是有的,这里我们就来分析一下如何解决这个问题

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

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

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

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();

不过模拟表单提交的方法经有可能也会被阻止...

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

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

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

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);

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

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

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
jQuery中:input选择器用法实例
Jan 03 #Javascript
jQuery中:only-child选择器用法实例
Jan 03 #Javascript
js中取得变量绝对值的方法
Jan 03 #Javascript
基于豆瓣API+Angular开发的web App
Jan 02 #Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 #Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 #Javascript
javascript制作的cookie封装及使用指南
Jan 02 #Javascript
You might like
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php上传文件问题汇总
2015/01/30 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
应届生求职推荐信
2013/10/28 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
《分一分》教学反思
2014/04/13 职场文书
培训科主任岗位职责
2014/08/08 职场文书
远程培训的心得体会
2014/09/01 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS