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 相关文章推荐
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
package.json各个属性说明详解
Mar 11 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
JS字符串函数扩展代码
2011/09/13 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
pygame实现成语填空游戏
2019/10/29 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
浅析Python面向对象编程
2020/07/10 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
高三自我鉴定
2013/10/23 职场文书
工作表扬信的范文
2014/01/10 职场文书
学习两会精神心得范文
2014/03/17 职场文书
创优争先心得体会
2014/09/11 职场文书
食品质检员岗位职责
2015/04/08 职场文书
2015年林业工作总结
2015/05/14 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
Ajax实现异步加载数据
2021/11/17 Javascript
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏