window.open、window.open,window.showModalDialog和window.showModelessDialog 的区别

时间 2019-11-11

标签 window.open window open window.showmodaldialog showmodaldialog window.showmodelessdialog showmodelessdialog 区别栏目 Windows 繁體版

原文原文链接

前端使用easyUi控件，在写新增，编辑弹出框时，由于数据较多页面比较复杂。easyUi自带的模态框，window/dialog须要在父页面中建立div,致使父页面代码不少。而后想到用window.open() window.showModalDialog('xxiconAdd.jsp','_blank','height=500, width=950, top=200, left=200, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no'); 不能作到遮罩，可能会出现多个窗体出现误操做。而后找到了window.showModalDialog可实现需求。一下查找资料作了比较：javascript

window.open、window.showModalDialog和window.showModelessDialog 的区别前端

博客分类： 模态窗口

1、前言要打开一个能够载入页面的子窗口有三种方法，分别是window.open、window.showModalDialog和window.showModelessDialog。 open方法就是打开一个页面，能够说同用url连接打开一个页面同样，不推荐使用，由于不少浏览器会拦截。这里推荐使用的是window.showModalDialog和window.showModelessDialog，下面介绍两者的异同和用法。java

2、 showModalDialog和showModelessDialog的区别 showModalDialog：被打开后就会始终保持输入焦点，除非对话框被关闭，不然用户没法切换到父窗口，相似alert的运行效果。 showModelessDialog：被打开后，用户能够随机切换输入焦点。对主窗口没有任何影响，最可能是被挡住一下而以。ajax

3、怎样才让在showModalDialog和showModelessDialog里的超链接不弹出新窗口在默认状况下，showModalDialog和showModelessDialog窗口中的连接都会致使打开一个新的窗口，但这不是咱们须要的。解决这个问题的方法是在被showModalDialog和showModelessDialog窗口调用的页面添加<base target="_self" /> 以下： <title>被打开的页面</title> <base target="_self" />浏览器

四.、showModalDialog和showModelessDialog不使用缓存 showModalDialog和showModelessDialog在第一次打开页面时会默认缓存该页面，若是再次打开相同URL的页面的话，他们会直接调用缓存中的页面，而不是从服务器返回，要不使用缓存可进行以下配置：缓存

<title>被打开的页面</title> <meta http-equiv="pragram" content="no-cache"> //禁止浏览器从本地缓存中调阅页面，网页不保存在缓存中，每次访问都刷新页面。 <meta http-equiv="cache-control" content="no-cache, must-revalidate"> //同上面意思差很少，必须从新加载页面 <meta http-equiv="expires" content="0"> //网页在缓存中的过时时间为0，一旦网页过时，必须从服务器上从新订上面的配置不必定有效果，因此不推荐使用，最好的办法是在URL后加上一个时间戳，以下： url = url + “&time=” + new Date();服务器

5、如何刷新showModalDialog和showModelessDialog里的内容在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，如下是相关代码：less

<body onkeydown="if (event.keyCode==116){reload.click()}"> <a id="reload" href="filename.htm" style="display:none">reload...</a> 将filename.htm替换成网页的名字而后将它放到你打开的网页里，按F5就能够刷新了，注意，这个要配合<base target="_self">使用，否则你按下F5会弹出新窗口的。因为在刷新上处理起来很是不方便，因此使用ajax结合showModalDialog和showModelessDialog使用是很是适合的，建议结合使用。jsp

6、用javascript关掉showModalDialog(或showModelessDialog)打开的窗口 <input type="button" value="关闭" onclick="window.close()"> 也要配合<base target="_self">，否则会打开一个新的IE窗口，而后再关掉的。函数

7、 showModalDialog和showModelessDialog数据传递技巧（例子用的是showModalDialog函数，showModelessDialog函数的用法同样）

父窗体向打开的窗体传递数据通常使用url参数传递
打开的窗体，即子窗体向父窗体进行数据传递有两种方法 (1) 第一种称为“函数法”，同调用一个函数并返回值同样能够经过在被调用的页面（子页面）使用window.returnValue来设置返回值，返回值能够是任何值或对象，调用页面（父页面）直接获取返回值便可。 //父窗体js，直接经过函数获取返回值

Html代码收藏代码

function openModalWindow(){  
          var returnValue = window.showModalDialog("sonPage.aspx");  
          alert(returnValue);  
      }  



//子窗体js，经过window.returnvalue来设置返回值

Html代码收藏代码

function setReturnFatherPageValue(){  
       window.returnValue = true;  
    }

(2) 第二种称为“引用法”，经过传递父窗体的引用，咱们能够操做父窗体上的全部东西要使用引用法就必须在打开子窗体时将父窗体做为一个参数传递给子窗体，而在子窗体能够经过window.dialogArguments获取到传递过来的父窗体的引用。 //父窗体js，将整个父window做为参数传递给子窗体

Html代码收藏代码

function openModalWindow(){  
          window.showModalDialog("sonPage.aspx", window);  
      }  



  //子窗体js，经过window.dialogArguments能够访问父window中的全部元素，它在这里表明了父window对象

Html代码收藏代码

function openModalWindow(){  
          var txt = window.dialogArguments.document.getElementByIdx("txt");  
          var lab = window.dialogArguments.document.getElementByIdx("lab");  
          txt.value = "sonPageChangedValue";  
          lab.value = "isTheSame";  
      }

8、控制弹出窗体的样式

dialogHeight:   对话框高度，不小于100px

```
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。

举例以下： window.showModalDialog("sonPage.aspx", "", "dialogHeight=350px;dialogwidth=410px;dialogLeft=0;dialogTop=25;help=no;resizable=no;status=no;scrollbars=no;"); 或 window.showModalDialog("sonPage.aspx", window, "dialogHeight=350px;dialogwidth=500px;help=no;scrollbars=no;"); 均可

9、窗口高度自适应，这个须要在每一个弹出框加载的页面放置，比较麻烦，并且不完善，使用时请调试好 Html代码收藏代码

<script type="text/javascript">  
  function resetDialogHeight(){  
      if(window.dialogArguments == null){  
          return; //忽略非模态窗口    
      }  
             var ua = navigator.userAgent;  
      var height = document.body.offsetHeight;  
      if(ua.lastIndexOf("MSIE 6.0") != -1){  
        if(ua.lastIndexOf("Windows NT 5.1") != -1){    //alert("xp.ie6.0");  
            window.dialogHeight=(height+102)+"px";    
        }  
        else if(ua.lastIndexOf("Windows NT 5.0") != -1){    //alert("w2k.ie6.0");    
           window.dialogHeight=(height+49)+"px";  
        }  
      }  
      else{  
        window.dialogHeight=height+"px";  
      }  
    }  
</script>

而后以下设置便可： Html代码收藏代码

<body onload="resetDialogHeight()">