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点击后一组图片左右滑动的实现代码
Aug 16 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
vue中watch的用法汇总
Dec 28 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
php中长文章分页显示实现代码
2012/09/29 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
为你总结一些php系统类函数
2015/10/21 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
Python: glob匹配文件的操作
2020/12/11 Python
锐步英国官网:Reebok英国
2019/11/29 全球购物
产品质量承诺范本
2014/03/31 职场文书
个人授权委托书
2014/04/03 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
工作收入住址证明
2014/10/28 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
2015年新学期寄语
2015/02/26 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
法制教育主题班会
2015/08/13 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js