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 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
vue瀑布流组件实现上拉加载更多
Mar 10 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
第一节--面向对象编程
2006/11/16 PHP
php英文单词统计器
2016/06/23 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
php-app开发接口加密详解
2018/04/18 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Python splitlines使用技巧
2008/09/06 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
python 换位密码算法的实例详解
2017/07/19 Python
聊聊Python中的pypy
2018/01/12 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
MySQL池化框架学习接池自定义
2022/07/23 MySQL