相信做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. P 1033 旧键盘打字

    转跳点:

  2. js 琐碎

    1.setTimeout() .setInterval() setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式.(即n毫秒后执行一次) setTimeout(code,n) set ...

  3. sql拆分列 时间拆分 日、月、年

    我想 查看今日访问人数 需要分组查询 就得 时间拆分 这两天百度 方法有很多 substring ... 但是 我这一列 是时间类型: 可以直接用 DATEPART() 函数用于返回日期/时间的单独部 ...

  4. 2 ~ express ~ 模板引擎的配置与使用

    一,创建应用 (一),创建应用,监听端口 var express = require('express') // 创建app应用 var app = express() app.listen(3000 ...

  5. C++编程学习(二) 数据

    博主已经有一些基础了,所以写的东西可能是容易错的,或者以前没记住的,或者是对理解知识点有帮助的.因此如果有纯小白看到了这篇博文,不懂的地方请自行百度啦~ 另外,本系列所有内容的图片均来自于西北工业大学 ...

  6. 2.10 Jetpack LiveData部分

    LiveData是一个可观察的数据持有者类,但和其他的可观察对象不同,它与生命周期相关联,比如Activity的生命周期.LiveData能确保仅在Activity处于活动状态下才会更新.也就是说当观 ...

  7. 二、CI框架之MCV模型

    一.关于MCV,大概就是下图所示: 模型(model)-视图(view)-控制器(controller) M用来处理数据库,V用来显示界面,C用来控制 二.对应到CI的源码,对应的是这3个目录 不忘初 ...

  8. 翻译SSD论文(Single Shot MultiBox Detector)

    转自http://lib.csdn.net/article/deeplearning/53059 作者:Ai_Smith 本文翻译而来,如有侵权,请联系博主删除.未经博主允许,请勿转载.每晚泡脚,闲来 ...

  9. 洛谷 P2341 [HAOI2006]受欢迎的牛|【模板】强连通分量

    题目传送门 解题思路: 先求强联通分量,缩点,然后统计新图中有几个点出度为0,如果大于1个,则说明这不是一个连通图,答案即为0.否则入度为0的那个强连通分量的点数即为答案 AC代码: #include ...

  10. UML-架构分析-阶段

    初始阶段:架构概念验证原型--->确定其可行性 细化阶段:因素表.技术备忘录.SAD(软件架构文档) 移交阶段:可能会修改SAD->确保与最终部署版本的一致性 后续进化循环:重温架构性因素 ...