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 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 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读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
js运动应用实例解析
2015/12/28 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
django中嵌套的try-except实例
2020/05/21 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
竞职演讲稿范文
2014/01/11 职场文书
亲子读书活动方案
2014/02/22 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
志愿者事迹材料
2014/12/26 职场文书
治庸问责工作总结
2015/08/11 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python