JavaScript - 模式窗口和非模式窗口

原创

袭冷 2014-01-05 18:04:22 博主文章分类：JavaWeb ©著作权

文章标签 showModalDialog showModelessDialog 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者袭冷的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、窗口创建

非模式窗口showModelessDialog：

用法：

function alertWindowForShowModelessDialog(){
    var childWindow = window.showModelessDialog(
        "dialogWindow.html",
        window,
       "dialogWidth:900px;dialogLeft:100px;Minimize=yes;Maximize=yes;");
}

模式窗口showModalDialog：

特性：

始终获得焦点，即时是最小化，直到关闭

用法：

function showWindowForShowModalDialog(){
    var childWindow = window.showModalDialog(
        "dialogWindow.html",
        window,
        "dialogHeight: 400px; dialogWidth: 900px; dialogTop: 100px;");
}

二、窗×××互

父窗口对话子窗口：

可通过创建时的句柄childWindow调用子窗口的方法，如：

childWindow.childAlert();

子窗口对话父窗口：

可通过创建时传入的window参数来调用父类窗口中的方法([]为子窗口层级决定)：

window.dialogArguments[.window.dialogArguments].parentAlert();

三、子窗口刷新

<input type="button" value="刷新"  id="reload_a" href=""></a>
                                                                                                                                          
<script type="text/javascript">
    function reload_self(){
        reload_a.href = "a.html" + "?random="+Math.random();
        reload_a.click();
    }
</script>

四、补充事项

防止<a/>点击后打开新页面的方法：在<head/>之间加入<base target="_self">

防止<form/>提交之后打开新页面的方法：

其一：

在<head/>之间加入<base target="_self">，若还不能，则在onsubmit中强制本页面提交：

function onsubmit(){
    document.Form1.target="_self";
}

其二、

<script type="text/javascript">
     window.name = "curWindow";
</script>
                                                                                                                           
<form name="myForm" id="myForm" action="" method="post" target="curWindow">

注意：在普通页面打开非模式窗口，非模式窗口再打开模式窗口时，不可以调用普通页面的方法，会卡死(仅测试IE9)

五、参数说明：

dialogHeight :对话框高度，不小于100px，ＩＥ４中默认的单位是em，而IE5中是px

dialogWidth: 对话框宽度

dialogLeft: 离屏幕左的距离

dialogTop: 离屏幕上的距离

center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度

help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes

resizable: {yes | no | 1 | 0 } ［IE5+］：是否可被改变大小。默认no

status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]

scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes

dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者预览时对话框是否隐藏。默认为no