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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
JavaScript手写数组的常用函数总结
Nov 22 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
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中时间函数date及常用的时间计算
2017/05/12 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
基于node实现websocket协议
2016/04/25 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
Python里disconnect UDP套接字的方法
2015/04/23 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
python cs架构实现简单文件传输
2020/03/20 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Python 如何展开嵌套的序列
2020/08/01 Python
《胖乎乎的小手》教学反思
2014/02/26 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
Python必备技巧之函数的使用详解
2022/04/04 Python
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS