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 相关文章推荐
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
vue回到顶部监听滚动事件详解
Aug 02 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
JS实现小米轮播图
Sep 21 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
鼠标图片振动代码
2006/07/06 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
说说node中的可读流和可写流的区别
2018/06/01 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
python plotly画柱状图代码实例
2019/12/13 Python
Python如何使用字符打印照片
2020/01/03 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
商务邀请函范文
2014/01/14 职场文书
安全教育演讲稿
2014/05/09 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2015年教务工作总结
2015/05/23 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
JS实现数组去重的11种方法总结
2022/04/04 Javascript