window.open() 之句柄保持和重连 | 影の域

影の域

关注web前端,追逐html5脚步,体会code人生

window.open() 之句柄保持和重连

window.open() 之句柄保持和重连

| 12,172 点击

window.open()是挺常用的弹窗方式,大部分时候用在一些会话框提示、上传、第三方应用交互等,这时若需要面对资源保持的问题时,就需要一些特殊的技巧来fix。

通常window.open 子页面的方式为:

childWinHandler = window.open(‘child.html’, ‘childWinName’, ‘height=100,width=100’);

这种方式的弹窗,在保证父页面不会被重定向 或 reload的前提下,就不用担心子页面窗口的句柄引用问题。

因为父亲页面中的 childWinHandler 变量存储着 子页面窗口句柄的对象引用。

但,若父页面因为某些原因临时重定向走了而后再回来了(或 reload/refresh了),这时子页面窗口句柄对象的引用就彻底丢失了。

如果,当前应用是个第三方登录接入或者级别较重要的应用的话,这样的问题可能会带来很多不必要的麻烦。

so, 如何解决呢?

google + 试验,以下是个值得参考的方案(支持 IE6+,FF,  Chrome, Safari 等)

 

window.open() 之句柄保持和重连

window.open() 之句柄保持和重连

 

【点击查看DEMO】

 

原理很简单:

在 window.open(‘child.html’, ‘子窗口名’,’窗口参数’) 子页面前,先 window.open(”, ‘子窗口名’,’窗口参数’)  空页面,

注意第一个参数是 空字符串,这样调用后,只需要通过判断 返回的句柄对象的 location.href 是否为子页面地址,

就可以判断出当前窗口句柄保持的是否是之前的子页面窗口。

若是,则无需再open,直接focus即可。

若不是,则放心的重新open子页面窗口,即可。

 

问题:

经过测试

IE6,在保证父页面不close的前提下,一切工作正常。但是父亲页面要是关闭后再重新打开,这时无法让子页面focus置顶,而且

这时以后若关闭子页面父页面内的 openWinHandler 变量的访问直接抛异常,导致无法走通open流程。

而 chrome 稍稍比IE6好一些起码不抛异常,只是父窗口关闭后,就好像再也找不到之前的那个窗口句柄,会再新开子窗口,貌似引用资源被释放一样。

其他浏览器,由于时间有限,就没仔细测试,也许还有遗漏的地方,若发现请反馈告诉我,谢谢。

 

总结:

在某些条件下,这种方式不乏是个折中的可参考方案。

参考:

http://josephj.com/entry.php?id=367

http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/48485/page2