本文实例讲述了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程序设计有所帮助。

JS打开新窗口防止被浏览器阻止的方法[转]的更多相关文章

  1. JS打开新窗口防止被浏览器阻止的方法

    这篇文章主要介绍了JS打开新窗口防止被浏览器阻止的方法,分析对比了常用方法与改进方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考. ...

  2. js页面跳转 和 js打开新窗口 方法

    js页面跳转 和 js打开新窗口 方法 第一种: 第二种: 第三种: 第四种: 第五种: 1.在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面" ...

  3. js 打开新窗口方式

    之前的项目,有个功能是下载文件,这里只要在浏览器输入 url 就会下载那个文件了.当时我只是简单得使用 window.open ,但是却会被浏览器进行拦截,要手动开启才行,然后就搜索研究其他方法,就看 ...

  4. Js打开新窗口拦截问题整理

    一.js打开新窗口,经常被拦截 //js打开新窗口,经常被拦截 //指定本窗口打开,可以使用 window.open('http://www.tianma3798.cn', '_self'); //不 ...

  5. ajax请求响应中用window.open打开新窗口会被浏览器拦截的解决方式

    一.问题描述 ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是会被浏览器给拦截了,需要用户点下. 二.问题分析 浏览器之所以拦截新开窗口是因为该操作并 ...

  6. 打开新窗口(window.open) open() 方法可以查找一个已经存在或者新建的浏览器窗口。 语法: window.open([URL], [窗口名称], [参数字符串])

    打开新窗口(window.open) open() 方法可以查找一个已经存在或者新建的浏览器窗口. 语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL: ...

  7. 浏览器拦截js打开新窗口

    最近做项目时,遇到的问题"想通过javascript在浏览器新标签页或新窗口打开一个新的页面,结果被浏览器大大无情给拦截了"业务需求:前端提交数据到后端,后端返回url,然后在新窗 ...

  8. js 打开新窗口

    以前老是用window.open方法打开浏览器新窗口,但是有的浏览器会阻止打开新窗口,一劳永逸的方式是通过js伪造a标签请求打开新窗口,代码如下: var atag = document.create ...

  9. vue iframe嵌套单页面时打开新窗口并自定义浏览器标题

    vue打开新窗口两种写法,效果一样: 第一种: router-link 传参用query或者params都可以,tagget和tag一定要加上才可以: 第二种: 直接写成a标签就可以了. 改变浏览器窗 ...

随机推荐

  1. CentOS6.5升级autoconf版本 Autoconf version 2.64 or higher is required

    安装软件时提示说需要Autoconf 2.64或更高的版本 [root@BobServerStation twemproxy]# autoconf configure.ac:8: error: Aut ...

  2. 什么是C++虚函数、虚函数的作用和使用方法

    我们知道,在同一类中是不能定义两个名字相同.参数个数和类型都相同的函数的,否则就是“重复定义”.但是在类的继承层次结构中,在不同的层次中可以出现名字相同.参数个数和类型都相同而功能不同的函数.例如在例 ...

  3. Zabbix iostat 监控配置

    ## zabbix iostat 监控模板安装与配置 配置定时任务,用于生成iostat的统计数据 crontab -e * * * * * /usr/local/zabbix327/bin/iost ...

  4. Convert Sorted Array to Binary Search Tree leetcode java

    题目: Given an array where elements are sorted in ascending order, convert it to a height balanced BST ...

  5. 【反射】Reflect Class Field Method Constructor

    关于反射 Reflection 面试题,什么是反射(反射的概念)? 主要是指程序可以访问,检测和修改它本身状态或行为的一种能力,并能根据自身行为的状态和结果,调整或修改应用所描述行为的状态和相关的语义 ...

  6. EasyUI-datagrid-自动合并单元格

    1.目标 1.1表格初始化完成后,已经自动合并好需要合并的行: 1.2当点击字段排序后,重新进行合并: 2.实现 2.1 引入插件 /** * author ____′↘夏悸 * create dat ...

  7. JavaScript的js文件压缩和格式化工具

    JavaScriptcompressor.com这个网站可是大名鼎鼎啊.以前在找到过压缩 Javascript 代码的程序,一直在用,感觉效果不错.域名是: http://javascriptcomp ...

  8. 《House of Cards》观后感

    <House of Cards>,首先我得说好看,36个赞,比我以前看的那些美剧都要好看,虽然我是个屌丝程序员,但是我还是希望我自己看书不只看专业的书那种,虽然我是个屌丝程序员,工科男,所 ...

  9. nginx学习笔记(四)-----日志切割脚本及定时任务

    一.日志切割脚本 #!/bin/sh #nginx目录 BASE_DIR=/usr/local/nginx #生成的日志 BASE_FILE_NAME=jonychen.access.log CURR ...

  10. C#.NET常见问题(FAQ)-浮点数如何四舍五入

    使用Math.Round方法即可实现保留指定的小数点后面位数,这种方法返回的还是double类型,而ToString方法并没有做实际转换   更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: ...