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 相关文章推荐
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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
通过文字传递创建的图形按钮
2006/10/09 PHP
php模板之Phpbean的目录结构
2008/01/10 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
学习ExtJS border布局
2009/10/08 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
js实现登录验证码
2016/12/22 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
python删除某个字符
2018/03/19 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
快速查找Python安装路径方法
2020/02/06 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
中学实习教师自我鉴定
2013/12/12 职场文书
高二化学教学反思
2014/01/30 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
人民调解员培训方案
2014/06/05 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
python的变量和简单数字类型详解
2021/09/15 Python