关于“浏览器无法拦截的弹出窗口”、IE、Firefox弹出新窗口
大概有很久很久都没有打理这里了,刚朋友问我,如何防止 弹出框被 浏览器屏蔽,我忽然想到了一个万全之策。
一般来说,我们会用 js 弹出窗口: window.open( url ); 这种方案基本被废弃了,因为所有浏览器都会封杀这种写法。
我要说的有两种方案:
1、比如,我们要弹出一个网页:http://julying.com,那么可以 构造:
<a id=”openWin” href=”http://julying.com”></a>
然后写脚本,
JS写法:
document.getElementById(‘openWin’).click();
jQuery写法:
$(‘#openWin’).click();
但这个写法是有问题的,他只能在 IE有作用,、非 IE浏览器 的 click() 是无效的,要专门正对非IE浏览器写新的脚本,这跟麻烦。
2、用 <form />
构建html:
<form id=”openWin” action=”http://julying.com” target=”_blank” method=”get”></form>
然后写脚本,
JS写法:
document.getElementById(‘openWin’).submit();
jQuery写法:
$(‘#openWin’).submit();
这种方案,任何浏览器都可以执行,并且不会被任何浏览器以及插件屏蔽。
—- 王子墨 2010 年 3月
2012.5.2 日补充:
看到留言说,上面方法失效了。
刚才测试了一下,上述方法,在 Firefox 4.0 版本之后已经失效了。Firefox 为了阻止广告,更加安全,禁止了脚本 自动 触发 .submit() , .click() 事件。
也就是说,脚本不能 在用户不触发事件的时候,不能打开一个新窗口,就是说必须是是用户主动触发 <a /> 的 click() 事件,或者 主动触发submit()事件。
所以:
<form id=”openWin” action=”http://julying.com” target=”_blank” method=”get”></form> ,
document.getElementById(‘openWin’).submit();
还是会被屏蔽。
就在我决定睡觉的时候,我忽然想到这样的方法:
$(document).click(function(){
$(‘#openWin’).submit();
});
测试之下,发现这样是可行的!
在Firefox 11 ,Chrome 17 下测试通过。
但是 :
$(window).scroll(function(){
$(‘#openWin’).submit();
});
还是会被屏蔽。
总结一下:
如果您需要在弹出新窗口一次,可用代码:
<form id=”openWin” action=”http://julying.com” target=”_blank” method=”get”></form>
$(document).one(‘click’,function(){
$(‘#openWin’).submit();
});
当然,也可以:
<a id=”openWin” href=”http://julying.com” target=”_blank”></a>
$(document).one(‘click’,function(){
$(‘#openWin’).click();
});
.one()函数 是 jQuery 特有的函数,详见:http://julying.com/jQuery-1.6-api/#p=one
即:当用户点击网页任何一个地方,会弹出窗口一次。如果用户不点击,就不会弹出!
Firefox 限制真严格啊。
经过测试,只允许 click() 内部嵌套 .submit() 、click() 事件。
mousemove , mouseout , $(window).scroll() 这种类型的全部不允许。
夜好深了,我的思维有点不清楚了,上面的文字感觉写的乱七八糟,凑和着看吧 ,这算抛砖引玉,可以顺着这个思路继续走下去。
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:王子墨 来源: 七月、前端攻城师王子墨
- 标签: 弹出窗口
- 发布时间:2012-11-27 13:41:52
- [66] Oracle MTS模式下 进程地址与会话信
- [66] Go Reflect 性能
- [65] 如何拿下简短的域名
- [59] android 开发入门
- [59] 图书馆的世界纪录
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则