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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
javascript html 静态页面传参数
Apr 10 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
基于vue组件实现猜数字游戏
May 28 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 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 多行多列显示
2009/08/15 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
应聘护士自荐信
2013/10/21 职场文书
心理健康教育心得体会
2013/12/29 职场文书
爱情保证书范文
2014/02/01 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
追悼会答谢词
2015/01/05 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL