相信做web前端或者使用JS的朋友都会遇到需要在新窗口打开页面的情况,现在浏览器大都具有弹出窗口拦截功能,所以传统的window.open()不再那么好用了。借鉴于网上查到的方法和我个人的实践,把弹出新窗口的方法给大伙都介绍一下。

第一种、使用原生javascript的window.open()方法(大部分情况下会被浏览自阻止)

第二种、模拟表单(form)提交,原理是指定表单的action为想要打开的URL地址,target设置为"_blank"不过模拟表单提交的方法经很多网友反映说也会被阻止

第三种、模拟超链接(<a>)被点击,用jquery的写法如下,注意最后openLink[0]是模拟的原生DOM对象被点击的(使用Jquery对象的话没反应)

var openLink = $("");
openLink.attr('href', 'URL地址');
openLink[0].click();

这种方法个人比较推荐的,因为简单方便。

第四种、利用浏览器的冒泡事件(这种方法稍微有点复杂,呵呵)

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的原始点击事件,就完成了

转载地址:http://blog.csdn.net/tinico/article/details/18033489

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

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

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

  2. JS打开新窗口防止被浏览器阻止的方法[转]

    本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器 ...

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

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

  4. js 打开新窗口方式

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

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

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

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

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

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

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

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

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

  9. js 打开新窗口

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

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

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

随机推荐

  1. windows driver 枚举串口

    //枚举串口 NTSTATUS status; HANDLE hKey = NULL; OBJECT_ATTRIBUTES oa; UNICODE_STRING strPath = RTL_CONST ...

  2. Egret Engine 2D - 遮罩

      矩形遮罩 shp.mask = new egret.Rectangle(20,20,30,50);   注意如果rec发生变化,需要重要将rec赋值给shp.mask 删除遮罩的方法 sprite ...

  3. 使用node.js安装asar和反编译app.asar

    背景:app.asar文件是Electron加密打包时的中间产物,electron.exe调用resources文件夹下的app.asar从而实现不用解压缩而直接读取文件内容的高效. 一.需要先安装n ...

  4. SqlServer体系结构

    1.SQL的ABC 特色 (1) Application 应用:理念是提供软件.硬件.服务在内的完整解决方案 (2) Box盒子: 传统部署方式.部署在企业内部. (3)Cloud: 私有云 .公有云 ...

  5. 17. react redux的中间件

    1. redux 数据流程图 View 会派发一个 Action Action 通过 Dispatch 方法派发给 Store Store 接收到 Action 连同之前的 State 发给  Red ...

  6. Sublime Text基本配置

    官网最新版本号 3059 破解链接: http://bbs.pediy.com/showthread.php?t=182774 可以看那个人放出来的百度网盘,去他的百度网盘里面可以看到最新的破解文件. ...

  7. COGS 1489玩纸牌

    %%%http://blog.csdn.net/clover_hxy/article/details/53171234 #include<bits/stdc++.h> #define LL ...

  8. 在开发过程中遇到的Oracle的坑及开发技巧

    本人与2018年毕业,工作一年多,仍是菜鸟,自毕业以来一直从事java软件开发工作,工作中大部分数据库都是使用的Oracle,碰到的问题总结一下(随时更新). 1.sql中使用group by 分组时 ...

  9. [转自官方文档] Django——render()

    每个视图都需要做2件事,返回一个包含被请求页面内容的HttpResponse对象或者一个404 快捷函数  render( 请求, 模板, 内容) 载入模板,填充上下文,再返回它生成的HttpResp ...

  10. idea~创建maven webapp项目

    1.选择 org.apache.maven.archtypes:maven-archtype-webapp 2.禁止远程下载 archetypeCatalog=internal 目的是不远程下载,否则 ...