window.open使用中遇到的问题

前端开发中经常要用到 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就算执行成功也不会返回新窗口引用。至于有什么影响你懂的。

转载于:https://www.cnblogs.com/feng_013/archive/2011/09/27/2175009.html

window.open使用中遇到的问题相关推荐

Oracle数据库从入门到精通,带你轻松入门！
1.什么是数据库? 数据库(database,简称DB):用于存放数据的仓库. 数据库管理系统(Database Management System,DBMS):指数据库系统中对数据进行管理的软件系统 ...
Honeywell EPKS系统SafeView配置及使用
Document Name SafeViewd的配置及使用 Version 01 Date March 18, 2020 Reference Standard Operating Procedure ...
Android控件系统（三）——Window与WindowMananger
Android版本:7.0(API27) [TOC] 澄清几个概念窗口(不是指的Window类):这是一个纯语义的说法,即程序员所看到的屏幕上的某个独立的界面,比如一个带有Title Bar的Act ...
robotframwork的WEB功能测试（一）—切换window窗口
selenium2library提供的切换到新窗口的关键字,只有select window,而且也只能根据title.name.url去定位.如下图所示,明显在实际使用中是不够的. 所以这里总结了一下 ...
window下安装Memcache
说来惭愧,从事PHP已经1年多了,但是很多PHP相关的知识都不知道. 前一阵子看到网上流传了很久的面试题,才了解到原来还有memcache这么个东西-_-. memcache 具体是什么Google一 ...
Android开发艺术探索》读书笔记 (8) 第8章理解Window和WindowManager
第8章理解Window和WindowManager 8.1 Window和WindowManager (1)Window是抽象类,具体实现是PhoneWindow,通过WindowManager就可 ...
window连接不上linux ftp_Linux文件自动备份方案
欢迎大家一起学习交流正在跳转jq.qq.com 需求场景:将云上一台Linux服务器文件备份到本地服务器,一周一备即可. 面对这样一个需求,我们可能面临如下一些问题. 1.备份方式:是云服务器推文 ...
window wamp中配置安装xhprof步骤(windows)
本文章来给各位同学介绍在window wamp中配置安装xhprof方法与具体步骤,希望些方法对各位同学会有所帮助哦. 1.下载在这里 http://dev.freshsite.pl/php-exte ...
Activity Window View WindowManager关系Touch事件分发机制
http://www.cnblogs.com/linjzong/p/4191891.html https://www.cnblogs.com/kest/p/5141817.html https://b ...

window.open使用中遇到的问题

window.open使用中遇到的问题相关推荐

最新文章

热门文章