【转】window.showModelessDialog的改进(兼容FF的window.showModelessDialog)

来源:互联网 发布:辐射4 超低配置优化 编辑:程序博客网 时间:2024/04/30 05:48

window.showModelessDialog的改进

文/Hafeyang  出处/博客园

window.showModelessDialog方法比window.open方法弹出的窗口不同的是弹出的窗口是模态的,这样必须关闭子窗口后才能操作父窗口.遗憾的是只有IE的支持,下面的方法能让FireFox"支持"模态窗口弹出

这种方法的灵感来自于上面的CuteEditor,弹出的窗口是模态的,在FF下是在window上写一个click方法,只要点击父窗口就调用子窗口的focus()方法,这样看上去就是"模态"的了

 

  1. var userAgent = navigator.userAgent.toLowerCase();
  2. var isFireFox=/mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent);
  3. if(isFireFox)
  4. {
  5.     window.showModelessDialog=function (url)
  6.     {
  7.         var windowName=(arguments[1]==null?"":arguments[1].toString());
  8.         var feature=(arguments[2]==null?"":arguments[2].toString());
  9.         var OpenedWindow=window.open(url,windowName,feature);
  10.         window.addEventListener('click',function (){OpenedWindow.focus();},false);
  11.         return OpenedWindow;
  12.     }
  13. }
  14. else
  15. {
  16.     //子窗口中调用父窗口
  17.     //IE中用window.parent.document
  18.     //FF中用window.opener.document
  19.     //下面的代码将 作用于IE '重载' window.showModelessDialog 方法 统一用 window.opener访问父窗口
  20.     var originFn=window.showModelessDialog;
  21.     window.showModelessDialog=function (url)
  22.     {
  23.         var OpenedWindow= originFn(url,arguments[1],arguments[2]);
  24.         OpenedWindow.opener=window;
  25.     }
  26. }
  27. function popW()
  28. {
  29.     var OpenedWindow=window.showModelessDialog('popWindow2.html','','width=400,height=400');
  30. }

说破了其实很简单,只是在下面的重写IE中的showModelessDialog方法就有点技巧了,originFn竟然可以"记住"原有的showModelessDialog方法,并且能这样调用,在我的试探中都有些吃惊.

通过上面的改造,showModelessDialog显得好用多了,兼容了两种浏览器.

原创粉丝点击