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性能陷阱小结(附实例说明)
Dec 28 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
Javascript自定义事件详解
Jan 13 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
vue.js 使用原生js实现轮播图
Apr 26 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php缓存技术详细总结
2013/08/07 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP模块memcached使用指南
2014/12/08 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
php查询操作实现投票功能
2016/05/09 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
python爬取各类文档方法归类汇总
2018/03/22 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
读书小明星事迹材料
2014/05/03 职场文书
大学生团员个人总结
2015/02/14 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
Web应用开发TypeScript使用详解
2022/05/25 Javascript