http://dwcmayday201204063551.iteye.com/blog/1621751

http://www.cnblogs.com/zhangyi85/archive/2009/09/03/1559594.html

http://blog.csdn.net/dotnetsong/article/details/2684854

http://dwcmayday201204063551.iteye.com/blog/1621751

http://blog.csdn.net/dotnetsong/article/details/2684854

一、前言 
要打开一个可以载入页面的子窗口有三种方法，分别是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>

然后如下设置即可：

    1. <body onload="resetDialogHeight()">

window.open || window.showModalDialog || window.showModelessDialog的更多相关文章

  1. window.location.Reload()和window.location.href 区别

    首先介绍两个方法的语法: reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])参数: bForceGet, 可选参数, 默认为 false, ...

  2. window.location.href 和 window.location.replace 的区别

    window.location.href  和  window.location.replace 的区别 1.window.location.href=“url”:改变url地址: 2.window. ...

  3. 详解;(function ($,window,document,undefined){...})(jQuery,window,document);

    1.代码最前面的分号,可以防止多个文件压缩合并以为其他文件最后一行语句没加分号,而引起合并后语法错误. 2.匿名函数(function(){})();:由于Javascript执行表达式是从圆括号里面 ...

  4. window.location.href和window.open的几种用法和区别

    使用js的同学一定知道js的location.href的作用是什么,但是在js中关于location.href的用法究竟有哪几种,究竟有哪些区别,估计很多人都不知道了. 一.location.href ...

  5. 拉动滚动条追加内容,无限延伸document高度 $(window).scroll(function(){if($(window).scrollTop() + $(window).height() == $(document).height()) { $("body").append(html) } })

    $(document).ready(function() { // endless scrolling $(window).scroll(function() { if($(window).scrol ...

  6. Pass value from child popup window to parent page window using JavaScript--reference

    Here Mudassar Ahmed Khan has explained how to pass value from child popup window to parent page wind ...

  7. window.open open new window?

    when ever i use window.location.href=//some url it always open a new window, this only happens when ...

  8. javascript：window.location.replace 与 window.location.reload() 刷新页面的不同效果

    今天早上我发现一个问题,当一个网页的地址最后面是一个#时(比如:http://www.baidu.com/go.asp#), 执行:window.location.replace(window.loc ...

  9. window.location.href 与 window.loaction.replace区别

    window.location.href和window.location.replace的区别 1.window.location.href=“url”:改变url地址: 2.window.locat ...

随机推荐

  1. http协议的各个版本及区别

      这个东西在一篇博文上面看见的,谢谢原博主提供!又学习了...

  2. 【转】Android：ListView常见错位之CheckBox错位

    原文网址:http://blog.csdn.net/lemon_tree12138/article/details/39337867 ListView在什么样的情况下会出现错位?错位的原因是什么?怎么 ...

  3. bzoj3997[TJOI2015]组合数学

    http://www.lydsy.com/JudgeOnline/problem.php?id=3997 偏序集,看上一篇随笔. 我们要求最少路径覆盖,可以等价于求最大独立集. 我们要找到一个权值和最 ...

  4. DPDK2.1开发者手册4-7

    Mempool Labrary 一个内存池(memory pool)就是固定大小对象的分配器.在dpdk中,它是通过名字来标示唯一性的,且使用环形队列来保存没有使用的空闲对象.它提供了一些可选项服务例 ...

  5. 并发队列之：BlockingQueue和ConcurrentLinkedQueue

    一.并行和并发区别: 并行:是指两者同时执行一件事.比如赛跑,两个人都在不停的往前跑: 并发:是指资源有限的情况下,两者交替轮流使用资源.比如一段路(单核CPU资源)同时只能过一个人,A走一段后,让给 ...

  6. 关于java中是引用传递还是值传递的问题！！！经常在笔试中遇到，今天终于弄明白了！

    关于JAVA中参数传递问题有两种,一种是按值传递(如果是基本类型),另一种是按引用传递(如果是對象).首先以两个例子开始:1)public class Test2 { public static vo ...

  7. java笔记2之算术运算符

    1运算符是什么呢 对常量和变量进行操作的运算符 2运算符分为哪些 算术运算符(+,-,*,/), 赋值运算符 比较运算符 逻辑运算符 位运算符 三目运算符 3运算符 A 算术运算符的注意事项 (1)整 ...

  8. css中margin:0 auto没作用

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...

  9. Ajax请求用户控件（.ascx）404错误

  10. Python进阶(面向对象编程基础)(三)

    6.类属性和实例属性名字冲突怎么办 修改类属性会导致所有实例访问到的类属性全部都受影响,但是,如果在实例变量上修改类属性会发生什么问题呢? class Person(object): address ...