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语句中的CDATA标签的意义
May 09 Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
微信小程序删除处理详解
Aug 16 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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中Date()时间日期函数的使用方法小结
2011/04/20 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
javascript每日必学之继承
2016/02/23 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
微信小程序仿通讯录功能
2020/04/09 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Python itertools.product方法代码实例
2020/03/27 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
农场厂长岗位职责
2013/12/28 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
毕业设计说明书
2014/05/07 职场文书
公司委托书格式
2014/08/01 职场文书
迟到检讨书
2015/01/26 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
PL350与SW11的比较
2021/04/22 无线电
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers