window.open和window.showModalDialog心得

我就是我 2022-06-13 03:45 603阅读 0赞

最近在一个项目上做一个弹出窗，在弹出窗中选取值后返回到父页面。为了样式统一没有用layer等弹出窗插件，而用js自带的方法，下面讲一下使用心得。

1.window.open是非阻塞式，也可以说非模态窗口。而window.showModalDialog是阻塞式模态窗口。阻塞或者模态窗口，只有你把当前窗口关闭后，才能去操作父亲窗口。

2.在页面上点击一个按钮，执行doClick方法弹出窗口，如下。url为弹出的jsp页面，可以去跳到后端去转跳页面。

function doClick(){
        var url = PATH+"/...";
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        if (userAgent.indexOf("Chrome") > -1){
            var iWidth = 330;
            var iHeight = 350;
            var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
            var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
            window.open(url,"openWin","width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft 
                            + ",menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes");
        } else if (userAgent.indexOf("Firefox") > -1) {
            var iWidth = 330;
            var iHeight = 350;
            var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
            var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
            window.open(url,"openWin","width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft 
                            + ",menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes");
        } else {
            name= window.showModalDialog(url,'openWin','modal=yes,status=no;scroll=yes;resizable=no;dialogWidth=330px;dialogHeight=350px');
            setTab(name);
        }
    }

从代码中可以看到我们支持了Chrome，Firefox和ie三种浏览器，关键的问题是三种浏览器如何将弹出窗中的值返回到父页面。

3.在弹出窗中点击保存按钮执行doSave方法

function doSave(){ 
        var name= $("#name").val();
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        if (userAgent.indexOf("Chrome") > -1){
            window.opener.setTab(name); 
        } else if (userAgent.indexOf("Firefox") > -1) {
            window.opener.setTab(name); 
        } else {
            window.returnValue = name;
        } 
        top.close();
    }

结合2中的代码可以看出，对于ie浏览器直接用window.returnValue将需要返回的值传递到父页面，在父页面接收到返回值（name）再调用setTab（name）方法处理返回值，而Chrome和Firefox是利用window.opener直接调用父页面的setTab（name）方法将值（name）传递到父页面进行处理。

注意：  
（1）window.showModalDialog是用在低版本的浏览器，高版本的浏览器只用window.open就可以了。  
（2）以上的弹出窗一定会有返回值，即使是点击弹出窗右上角的叉号，所以需要对返回值判断，判断返回值是否是undefined，因为如果第一次打开弹出窗将返回值保存到父页面后再次打开弹出窗，点击叉号关闭弹出窗会清空父页面保存的返回值。

发表评论取消回复

表情：

评论列表（有 0 条评论，603人围观）

还没有评论，来说两句吧...

相关阅读

相关心得

心得: 今天老师说了学习算法的最大误区就是题就做一遍，可以按照五毒神掌走；至少5遍；而且说了学习算法要注意：找规律，因为计算机只能做重复的事情，所以找规律是最好

迈不过友情╰/ 2023年07月24日 08:12/ 0 赞/ 2 阅读

相关 keepalived配置文件和心得

\keepalived keepalived原理：基于VIP （虚拟IP） vrrp协议，即建立一个虚拟IP地址（如172.24.0.1/16），让所有设备都能

超、凢脫俗/ 2023年06月18日 02:54/ 0 赞/ 28 阅读

相关 showModalDialog和showModelessDialog使用心得

一、showModalDialog和showModelessDialog有什么不同？　　showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否

Dear 丶/ 2022年08月10日 13:43/ 0 赞/ 199 阅读

相关 Redmine的安装、总结和心得

一．安装： 1. 安装Redmine，注意版本的控制，如：redmine的版本是：1.3.2则相应的：Ruby 1.8.7、rails 2.3.14、rack 1

系统管理员/ 2022年06月15日 10:58/ 0 赞/ 446 阅读

相关 window.open和window.showModalDialog心得

最近在一个项目上做一个弹出窗，在弹出窗中选取值后返回到父页面。为了样式统一没有用layer等弹出窗插件，而用js自带的方法，下面讲一下使用心得。 1.window.open是

我就是我/ 2022年06月13日 03:45/ 0 赞/ 604 阅读

相关使用tiddlywiki的用途和心得？

作者：Cheny Dimpurr 链接：https://www.zhihu.com/question/31214433/answer/244696951 来源：知乎

分手后的思念是犯贱/ 2022年05月31日 06:13/ 0 赞/ 432 阅读

相关 umi 入门和一些使用心得

umi 入门和一些使用心得简单介绍一句抄一张架构图过来快速上手推荐项目参考项目结构

た入场券/ 2022年04月10日 12:15/ 0 赞/ 1259 阅读

相关心得

不要重复发明轮子，要充分利用已有的资源，比如程序框架[MFC][]、函数库，插件等。重复现成的、可用的、已经证明很好用的东西就是造轮子 [MFC]: https://ww

本是古典何须时尚/ 2022年03月26日 11:10/ 0 赞/ 228 阅读

相关 mschart 使用心得和部署。

参考： [http://www.cnblogs.com/suguoqiang/archive/2013/01/16/2862945.html][http_www.cnblogs

清疚/ 2021年12月24日 15:55/ 0 赞/ 275 阅读

相关心得

这一学期已经过去了，在这一学期中，我对自己很不满意，心思完全没有放在学习上面，对于JAVA这门课程来说，没有认真的在学习，上课总是在睡觉，没有听老师认真的讲课，我对于我自己的表

约定不等于承诺〃/ 2021年12月12日 09:29/ 0 赞/ 303 阅读