window.open使用中遇到的问题
2011-09-27 16:53
429 查看
前端开发中经常要用到 window.open 弹出一个新窗口来进行交互,但是在使用过程中却会碰到各种各样的问题,下面是我在平时开发过程中碰到的一些问题。
对于winodw.open的使用可以先看下这个文章 http://www.w3help.org/zh-cn/causes/BX1053
一.浏览器拦截
由于各种弹出广告的滥用,现在各个浏览器对window.open的使用都进行了严格的限制,还有各种的弹出窗口拦截器,稍不留神就会导致window.open方法被拦截。
下面这种脚本自动触发的弹窗行为将会被浏览器拦截掉。
那么我们该如何正确的弹出窗口呢,其实只要把弹出窗口的函数绑定到鼠标的onclick事件上浏览器就会认为这是一个合理的open,不会进行拦截。
或者你可以将弹出窗口函数绑定到document.body上,只要用户在页面上进行点击就会弹出窗口。
这样可以保证正常的弹出新窗口,但是如果在点击事件中要先发送一个AJAX请求,根据请求结果再弹出窗口的行为在有的浏览器下仍会被拦截,如Chrome,FF
解决思路有下面两种:
1.openNewWindow中先弹出一个空白窗口,待AJAX请求返回再修改弹出window的url。
2.不用ajax直接OPEN要请求的URL,然后由服务器来判断重定向到要open的URL。
这两种方法都会导致窗口出现较长时间的白页,而且如果最后请求结果是不需要弹窗的时候就需要关闭该窗口,就会是一个白页闪了一下,用户体验很不好。所以应该尽量避免在ajax请求返回中弹窗。
二. IE6下回传值问题
看下面的例子,例子中弹出的窗口页面会调用父页面的callBackFun方法,然后将自己关闭。
newWindow.html
主页面:
当接收到的参数为引用类型时,如果弹出窗口被关闭,IE6下主页面接收到的数据也会被回收掉。此时判断obj是存在的,但是尝试访问obj.msg时就会出错,没任何提示。所以如果有这种使用场景应先对obj进行深度复制。
三.页面不能解gzip的问题
IE6下window.open打开的页面如果同时进行了cache和gzip压缩,会导致页面偶发的出现白页不解析的情况。这时其实页面已经正常获取到了,只是由于未解开gzip压缩导致的。解决方法就是调整输出的头信息(cache和gzip)。
这是IE6的一个BUG,不只出现在window.open的时候,只是我在这种情况下遇到了而已。可以参考下面的文章
http://blog.sina.com.cn/s/blog_4dd475390100qci5.html
四.如何判断弹出窗口已关闭
window.open会返回一个弹出窗口的句柄,该句柄有一个 closed 属性,当窗口被关闭时值为true,否则为false。但是在IE下会有个BUG,窗口被关闭之后 closed属性并没有立即被设置为true。所以应不断的检测closed属性直到为true才可以确认窗口已关闭。虽然为false时也可能已经被关闭了。下面页面是IE下的错误表述
http://support.microsoft.com/kb/241109
五.IE7下设置所有页面都在新标签页中打开导致的返回值问题
大多数时候我们通过下面的代码来判断弹出窗口是否成功,如果成功会返回弹出窗口的引用,失败会返回null。
但是如果在IE7下开启了所有页面都在新标签页中打开,window.open就算执行成功也不会返回新窗口引用。至于有什么影响你懂的。
对于winodw.open的使用可以先看下这个文章 http://www.w3help.org/zh-cn/causes/BX1053
一.浏览器拦截
由于各种弹出广告的滥用,现在各个浏览器对window.open的使用都进行了严格的限制,还有各种的弹出窗口拦截器,稍不留神就会导致window.open方法被拦截。
下面这种脚本自动触发的弹窗行为将会被浏览器拦截掉。
<script type="text/javascript"> //将会被拦截 window.open(url); </script>
那么我们该如何正确的弹出窗口呢,其实只要把弹出窗口的函数绑定到鼠标的onclick事件上浏览器就会认为这是一个合理的open,不会进行拦截。
<script type="text/javascript"> openNewWindow =function() { window.open(url); } </script> <button onclick="openNewWindow()">弹出窗口</button>
或者你可以将弹出窗口函数绑定到document.body上,只要用户在页面上进行点击就会弹出窗口。
这样可以保证正常的弹出新窗口,但是如果在点击事件中要先发送一个AJAX请求,根据请求结果再弹出窗口的行为在有的浏览器下仍会被拦截,如Chrome,FF
<script type="text/javascript"> openNewWindow =function() { $.ajax({ //发送一个ajax请求 url:ajax请求的url, success: function() { //在请求返回中弹窗,有的浏览器下会被拦截 window.open(url); } }); } </script>
解决思路有下面两种:
1.openNewWindow中先弹出一个空白窗口,待AJAX请求返回再修改弹出window的url。
2.不用ajax直接OPEN要请求的URL,然后由服务器来判断重定向到要open的URL。
这两种方法都会导致窗口出现较长时间的白页,而且如果最后请求结果是不需要弹窗的时候就需要关闭该窗口,就会是一个白页闪了一下,用户体验很不好。所以应该尽量避免在ajax请求返回中弹窗。
二. IE6下回传值问题
看下面的例子,例子中弹出的窗口页面会调用父页面的callBackFun方法,然后将自己关闭。
newWindow.html
<script type="text/javascript"> onload =function(){ window.opener.callBackFun({ 'msg' : 'hahhaha'}); self.close(); //方法调用后关闭自身窗口 } </script>
主页面:
<script type="text/javascript"> $showlog =function( msg ){ var el = document.getElementById( 'log' ); el.innerHTML = el.innerHTML +'<br/>'+ msg; } openNewWindow =function() { window.open("./newWindow.html"); } callBackFun =function( obj ){ //正常打印 $showlog(obj.msg); //延时保证在窗口关闭之后执行 setTimeout(function(){ //当打开的窗口被关闭之后访问obj.msg,IE6下会直接报错 $showlog(obj.msg); },1000); } </script> <button onclick="openNewWindow()">弹出窗口</button> <div id="log"></div>
当接收到的参数为引用类型时,如果弹出窗口被关闭,IE6下主页面接收到的数据也会被回收掉。此时判断obj是存在的,但是尝试访问obj.msg时就会出错,没任何提示。所以如果有这种使用场景应先对obj进行深度复制。
三.页面不能解gzip的问题
IE6下window.open打开的页面如果同时进行了cache和gzip压缩,会导致页面偶发的出现白页不解析的情况。这时其实页面已经正常获取到了,只是由于未解开gzip压缩导致的。解决方法就是调整输出的头信息(cache和gzip)。
header('Cache-Control: post-check=0, pre-check=0'); header('Pragma: ');
这是IE6的一个BUG,不只出现在window.open的时候,只是我在这种情况下遇到了而已。可以参考下面的文章
http://blog.sina.com.cn/s/blog_4dd475390100qci5.html
四.如何判断弹出窗口已关闭
window.open会返回一个弹出窗口的句柄,该句柄有一个 closed 属性,当窗口被关闭时值为true,否则为false。但是在IE下会有个BUG,窗口被关闭之后 closed属性并没有立即被设置为true。所以应不断的检测closed属性直到为true才可以确认窗口已关闭。虽然为false时也可能已经被关闭了。下面页面是IE下的错误表述
http://support.microsoft.com/kb/241109
五.IE7下设置所有页面都在新标签页中打开导致的返回值问题
大多数时候我们通过下面的代码来判断弹出窗口是否成功,如果成功会返回弹出窗口的引用,失败会返回null。
var _win=window.open(url); if(!_win){ //弹出失败,重定向当前页面到url }else{ //弹出成功 }
但是如果在IE7下开启了所有页面都在新标签页中打开,window.open就算执行成功也不会返回新窗口引用。至于有什么影响你懂的。
相关文章推荐
- 使用window.open()方法时遇到的问题
- window.onload使用时遇到的问题_1
- 使用Open Flash Chart同时显示多图遇到的问题
- 使用ACE日志策略时遇到的问题:DLL::open failed for ACE: Error: check log for details Unable to find service 'Logger'
- window.showModalDialog浏览器不支持后使用window.open代码问题处理方法
- 使用open flash chart的BarGlass时遇到的问题
- window.open()使用方法以及传参数的问题总结
- WPF WebBrowser 使用window.open()打开 新窗口相关问题的解决
- window.open方法使用中的问题及js中的两个值相加
- window.open遇到的问题的详细解说
- 打开新窗口的window.open使用方法以及最大化等问题解决方法汇总
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
- snort在使用过程中遇到的问题:ERROR: OpenAlertFile() => fopen() alert file log/alert.ids:No such file or directory
- 使用window.open()方法打开新页面,被浏览器拦截问题
- 【问题集】window.open使用被拦截问题
- 打开新窗口的window.open使用方法以及最大化等问题解
- 使用SiftGPU遇到问题:freeglut ERROR: Function <glutDestroyWindow> called without first calling 'glutInit'.
- 打开新窗口的window.open使用方法以及最大化等问题解决方法汇总
- Ubuntu下安装和使用OpenNMT翻译以及其中系统中遇到的问题
- 打开新窗口的window.open使用方法以及最大化等问题解决方法汇总