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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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 选项及相关信息函数库
2006/12/04 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
python版微信跳一跳游戏辅助
2018/01/11 Python
Python操作MySQL数据库的方法
2018/06/20 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
python爬虫基础知识点整理
2020/06/02 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
韩国11街:11STREET
2018/03/27 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
师范大学音乐表演专业求职信
2013/10/23 职场文书
给领导的检讨书
2014/02/16 职场文书
中学生自我评价范文
2015/03/03 职场文书
郭明义电影观后感
2015/06/08 职场文书
汽车车尾标语大全
2015/08/11 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python