文档章节

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

 小鱼吃大鱼
发布于 2016/10/27 17:29
字数 1482
阅读 19
收藏 2

前端使用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可实现需求。 一下查找资料做了比较:

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

博客分类: 模态窗口 

一、前言 要打开一个可以载入页面的子窗口有三种方法,分别是window.open、window.showModalDialog和window.showModelessDialog。 open方法就是打开一个页面,可以说同用url链接打开一个页面一样,不推荐使用,因为很多浏览器会拦截。 这里推荐使用的是window.showModalDialog和window.showModelessDialog,下面介绍二者的异同和用法。

二、 showModalDialog和showModelessDialog的区别 showModalDialog:被打开后就会始终保持输入焦点,除非对话框被关闭,否则用户无法切换到父窗口,类似alert的运行效果。 showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响,最多是被挡住一下而以。

三、怎样才让在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();

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

<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使用是非常适合的,建议结合使用。

六、 用javascript关掉showModalDialog(或showModelessDialog)打开的窗口 <input type="button" value="关闭" onclick="window.close()"> 也要配合<base target="_self">,不然会打开一个新的IE窗口,然后再关掉的。

七、 showModalDialog和showModelessDialog数据传递技巧(例子用的是showModalDialog函数,showModelessDialog函数的用法一样)

  1. 父窗体向打开的窗体传递数据一般使用url参数传递
  2. 打开的窗体,即子窗体向父窗体进行数据传递有两种方法 (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";  
      }  

八、 控制弹出窗体的样式

  1.   dialogHeight:   对话框高度,不小于100px
    
  2.   dialogWidth:   对话框宽度。
    
  3.   dialogLeft:    离屏幕左的距离。
    
  4.   dialogTop:    离屏幕上的距离。
    
  5.   center:  { yes | no | 1 | 0 } : 是否居中,默认yes,但仍可以指定高度和宽度。
    
  6.   help: {yes | no | 1 | 0 }:      是否显示帮助按钮,默认yes。
    
  7.   resizable:  {yes | no | 1 | 0 } [IE5+]:    是否可被改变大小。默认no。
    
  8.   status:{yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
    
  9.   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;"); 都可

九、 窗口高度自适应,这个需要在每个弹出框加载的页面放置,比较麻烦,而且不完善,使用时请调试好 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()"> 

© 著作权归作者所有

粉丝 4
博文 63
码字总数 32511
作品 0
合肥
私信 提问
window.open()和window.showModalDialog()

本文主要讲解window.open()和window.showModalDialog()弹出窗口的一些基本用法和刷新问题 window.open()弹出对话框: 基本语法: window.open(pageURL,name,parameters) 其中: pageURL 为子窗...

旺仔520
2014/02/28
0
0
ASP.NET 打开新窗口几种方法

ASP.NET打开新窗口方法一: Response.Write(" "); 这种方式代码每次是生成在页面最顶端 ASP.NET打开新窗口方法二: string strScript = ""; strScript += " "; bool b = ((Page)System.Web.Htt......

晨曦之光
2012/03/09
2.9K
0
window.showModalDialog以及window.open用法简介

一、window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二、基本语法: window.open(pageURL,name,parameters) 其中: pageURL 为子窗口路径 name 为子窗口句柄 para...

冯京宝
2012/05/02
99
0
window.opener用法(只是转载,暂未测试)

window.opener : 返回打开当前窗口的那个窗口的引用. 如果当前窗口是由另一个窗口打开的, window.opener保留了那个窗口的引用. 如果当前窗口不是由其他窗口打开的, 则该属性返回 null. 比如在...

文文1
2018/01/11
16
0
javascript弹出对话框的几种形式

对话框有三种 1:只是提醒,不能对脚本产生任何改变; 2:一般用于确认,返回 true 或者 false ,所以可以轻松用于if...else...判断 3:一个带输入的对话框,可以返回用户填入的字符串,常见...

开源中国段子手
2016/05/05
132
0

没有更多内容

加载失败,请刷新页面

加载更多

maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
今天
8
0
Linux创建yum仓库

第一步、搞定自己的光盘 #创建文件夹 mkdir -p /media/cdrom #挂载光盘 mount /dev/cdrom /media/cdrom #编辑配置文件使其永久生效 vim /etc/fstab 第二步,编辑yun源 vim /ect yum.repos.d...

究极小怪兽zzz
今天
6
0
jar 更新部分文件

C:\Program Files (x86)\Java\jdk1.8.0_102\bin>jar -hIllegal option: hUsage: jar {ctxui}[vfmn0PMe] [jar-file] [manifest-file] [entry-point] [-C dir] files ...Options: -c c......

圣洁之子
今天
9
0
OSChina 周六乱弹 —— 感谢女装红薯开办了这个网站

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @胖达panda:分享歌词: 我有一只小毛驴我从来也不骑,有一天我心血来潮骑着去赶集,我手里拿着小皮鞭我心里正得意,不知怎么哗啦啦,我摔了一...

小小编辑
今天
2.6K
13
DDD(四)

1,引言 软件开发者大多趋向于将关注点放在数据上,而不是领域上。这对于刚入门的DDD的新手而言也是如此。以我目前的思考方式,数据库依然占据主要的地位。开发一个功能,首先我就会考虑我会...

MrYuZixian
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部