博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用JS打开新窗口,防止被浏览器阻止的方法
阅读量:4966 次
发布时间:2019-06-12

本文共 1433 字,大约阅读时间需要 4 分钟。

相信做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

转载于:https://www.cnblogs.com/archermeng/p/7537110.html

你可能感兴趣的文章
网站分页
查看>>
HDOJ 2444 The Accomodation of Students
查看>>
排序之有序数组合并
查看>>
springMVC之mvc:interceptors拦截器的用法
查看>>
Java之美[从菜鸟到高手演变]系列之博文阅读导航
查看>>
C#将科大讯飞语音合成文件转换为MULAW音频格式
查看>>
解决使用Rails中使用中文时出现"Your template was not saved as valid UTF-8"的问题
查看>>
LoadRunner配置方案
查看>>
loadrunner解决“服务器正在运行中”方法
查看>>
界面编程之QT的线程20180731
查看>>
三元环计数问题
查看>>
页面内嵌iframe 防止session过期
查看>>
c#冒泡算法
查看>>
socketv 验证客户端链接的合法性
查看>>
iis 启用父目录路径访问
查看>>
javaweb学习总结(四十三)——Filter高级开发
查看>>
paip.函数方法回调机制跟java php python c++的实现
查看>>
Atitit 自然语言处理原理与实现 attilax总结
查看>>
数据库——JDBC
查看>>
第22章:MongoDB-聚合操作--聚合管道--$out
查看>>