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(‘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