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 组件之旅(二)编码实现和算法
Oct 28 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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 aes (ecb)解密后乱码问题
2015/06/22 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
利用Python实现图书超期提醒
2016/08/02 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
python实现网页自动签到功能
2019/01/21 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
社会学专业求职信
2014/02/24 职场文书
户籍证明格式
2014/09/15 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
活动经费申请报告
2015/05/15 职场文书
撤诉状格式范本
2015/05/19 职场文书
乱世佳人观后感
2015/06/08 职场文书
会议新闻稿
2015/07/17 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
nginx 配置指令之location使用详解
2022/05/25 Servers
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS