一、前言
要打开一个可以载入页面的子窗口有三种方法，分别是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，直接通过函数获取返回值

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

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

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

(2)    第二种称为“引用法”，通过传递父窗体的引用，我们可以操作父窗体上的所有东西

要使用引用法就必须在打开子窗体时将父窗体作为一个参数传递给子窗体，而在子窗体可以通过window.dialogArguments获取到传递过来的父窗体的引用。

//父窗体js，将整个父window作为参数传递给子窗体

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

//子窗体js，通过window.dialogArguments可以访问父window中的所有元素，它在这里代表了父window对象

  1. function openModalWindow(){
  2. var txt = window.dialogArguments.document.getElementByIdx("txt");
  3. var lab = window.dialogArguments.document.getElementByIdx("lab");
  4. txt.value = "sonPageChangedValue";
  5. lab.value = "isTheSame";
  6. }

八、 控制弹出窗体的样式

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;");

都可

九、  窗口高度自适应，这个需要在每个弹出框加载的页面放置，比较麻烦，而且不完善，使用时请调试好

  1. <script type="text/javascript">
  2. function resetDialogHeight(){
  3. if(window.dialogArguments == null){
  4. return; //忽略非模态窗口
  5. }
  6. var ua = navigator.userAgent;
  7. var height = document.body.offsetHeight;
  8. if(ua.lastIndexOf("MSIE 6.0") != -1){
  9. if(ua.lastIndexOf("Windows NT 5.1") != -1){    //alert("xp.ie6.0");
  10. window.dialogHeight=(height+102)+"px";
  11. }
  12. else if(ua.lastIndexOf("Windows NT 5.0") != -1){    //alert("w2k.ie6.0");
  13. window.dialogHeight=(height+49)+"px";
  14. }
  15. }
  16. else{
  17. window.dialogHeight=height+"px";
  18. }
  19. }
  20. </script>

然后如下设置即可：

<body onload="resetDialogHeight()">

window.open、window.showModalDialog和window.showModelessDialog 的区别[转]的更多相关文章

  1. WPF WebBrowser屏蔽弹出alert ，confirm ，prompt ，showModalDialog() ，window.open()

    WPF WebBrowser屏蔽弹出alert ,confirm ,prompt ,showModalDialog() ,window.open()添加Microsoft.mshtml.dll,然后写 ...

  2. window.showModalDialog 与window.open传递参数的不同？

    简单的说,就是一个在弹出窗口之后可以做其它的事,即window.open 另一个在弹出窗口之后不能做其它的事,只能是关闭了当前的窗口之后才能做其它的事,即window.showModalDialog ...

  3. window.showModalDialog与window.open()使用

    window.showModalDialog 有些浏览器不兼容,尝试用window.open() 封装替代,需要打开子窗口后向父窗口传递数据. <html> <script src= ...

  4. 2016/2/22 1、DOM的基本概念 2、Window对象操作 3、Windows.history对象 4、Window.location对象 5、Window.status对象

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  5. $(window).load(function() {})和$(document).ready(function(){})的区别

    JavaScript 中的以下代码 : Window.onload = function (){// 代码 }  等价于  Jquery 代码如下: $(window).load(function ( ...

  6. JavaScript中，window.opener是什么？window.parent和window.opener有啥区别？

    来自CSDN的问答: window.opener是什么啊? ++++++++++++++++++++++++++++++++++++++++++++++++++ 弹出本窗体的句柄 比如你想点一个按钮直 ...

  7. Sheet can not be presented because the view is not in a window的解决办法,和window的简单使用

    Sheet can not be presented because the view is not in a window,顺便在stackoverflow上找了答案,希望能给大家带来帮助,在此感谢 ...

  8. js关闭当前窗口，window.close()方法只能是window.open打开的才能执行关闭

    js关闭当前窗口,window.close()方法只能是window.open打开的才能执行关闭. function closeWin() { //open(location, '_self').cl ...

  9. 从一个例子了解window.onload、$(function(){})、$(window).load(function(){})的加载顺序

    最近遇到一个轮播需求: 1. ajax请求服务器,返回json,判断json数据里每一项中isFix属性是0还是1,0表示不轮播,1表示需要轮播. 2. 当isFix属性为0的时候,表示该图片不轮播, ...

随机推荐

  1. Yii GridView::widget

    GridView::widget文档 http://demos.krajee.com/grid GridView::widget([ 'dataProvider' => $dataProvide ...

  2. python 推荐算法

    每个人都会有这样的经历:当你在电商网站购物时,你会看到天猫给你弹出的“和你买了同样物品的人还买了XXX”的信息:当你在SNS社交网站闲逛时,也会看到弹出的“你可能认识XXX“的信息:你在微博添加关注人 ...

  3. iOS开发笔记--如何实现程序长时间未操作退出

    我们使用金融软件经常会发现手机锁屏或者长时间未操作就会退出程序或者需要重新输入密码等情况.下面让我们看一下如何实现这种功能.我们知道iOS有一个事件循环机制,也就是大家所说的runloop.我们在对程 ...

  4. X明X源面试题《三》

    本文转自自zhangxh_Doris 昨天(05.23)下午去参加了明源软件的暑期实习宣讲+笔试,第一次听说这个行业,行业和笔试风格完全不一样啊,5道行测智力题+1个问答+ 斐波那契数列 + 洗牌算法 ...

  5. 构造三层时报错“程序 “D:\MyTest\....”不包含适合于入口点的静态"Main"方法”

    错误 1 程序“D:\MyTest\EBookShop\Model\obj\x86\Debug\Model.exe”不包含适合于入口点的静态“Main”方法 原因:原来创建项目的时候,用的是“空项目” ...

  6. Javascript中的函数中的this值

    看下面这段代码会在控制台上输出什么内容? <script> var url="fang.com"; var obj={ url:"soufun.com&quo ...

  7. poj1742

    Coins Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 33998   Accepted: 11554 Descripti ...

  8. IIS配置(持续更新中...)

    本文暂时适用于IIS7.5. IIS配置文件路径:"C:\Windows\System32\inetsrv\config\applicationHost.config" 1.sta ...

  9. 《从零开始学Swift》学习笔记（Day 42）——构造函数调用规则

    原创文章,欢迎转载.转载请注明:关东升的博客 在构造函数中可以使用构造函数代理帮助完成部分构造工作.类构造函数代理分为横向代理和向上代理,横向代理只能在发生在同一类内部,这种构造函数称为便利构造函数. ...

  10. Spring3.2.11与Quartz2.2.1整合时内存泄漏的问题的解决

    Quartz是一款定时任务调度的开源框架,使用起来比较方便.并且Spring的support包对Quartz有集成.但是笔者在web应用使用的过程中却遇到了内存泄漏的问题. 问题的产生 笔者在使用Sp ...