zoukankan      html  css  js  c++  java
  • 转:模式窗口showModalDialog的用法总结

    模式窗口showModalDialog的用法总结

     

    最近几天一直在处理模式窗口的问题,索性写了这篇总结,以供参考:

    1。打开窗口:
    var handle = window.showModalDialog(url, objects, feathers);
    其中:objects可以为参数(包括数组),也可以是对象。
    通常的用法 objects = {window} ,把父窗体的对象共享给子窗体。

    2。关闭子窗口:
    window.close();

    3。从子窗体传参数给父窗体:
    window.returnVal = string;

    3。清除缓存,防止模式窗口页面不更新的情况:
    HTML
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Mon, 23 Jan 1978 20:52:30 GMT">
    ASP
    <%
    Response.Expires = -1
    Response.ExpiresAbsolute = Now() - 1
    Response.cachecontrol = "no-cache"
    %>
    PHP
    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
    header("Cache-Control: no-cache, must-revalidate");
    header("Pragma: no-cache");
    JSP
    response.setHeader("Pragma","No-Cache");
    response.setHeader("Cache-Control","No-Cache");
    response.setDateHeader("Expires", 0);

    4。防止打开新窗口(如提交表单):
    <base target="_self">

    5。在模式窗口使用F5刷新页面:
    <base target="_self">
    <body onkeydown="if (event.keyCode==116){reload.click()}">
    <a id="reload" href="filename.htm" style="display:none">reload...</a>
    其中:filename为窗口页面。

    6。防止模式窗口打开的页面出现cookie丢失的情况:
    模式窗口打开新窗口时,仅可以使用 showModalDialog(url,window,feathers); 方法,且 objects 为 window 。

    7.在弹出窗口中获得或设置主窗口的任何值:
    打开弹出窗口时用:showModalDialog(url, window, feathers)
    在弹出窗口中使用 window.dialogArguments 对象(即主窗口传递过来的 window 对象集),即可以获得或者设置主窗口的值。

    在ModalDialog中操作父窗口对象

    文/Ray

    1、不能使用window.parent

    Window.parent是用来在frame中进行操作的,在对话框中不能用来操作父窗口对象

    2、正确的做法

    调用modaldialog时通过传参数的方式操作

    例:

    需求

    父窗口页面为a.html 子窗口页面为b.html。a.html中有文本框id为test1,在打开的对话框中点击按钮,将a.html的文本框值改为“子窗口值”。

    实现

    打开对话框时把test1作为参数传给子窗口,在子窗口中获取参数,将参数对象(即a.html中传过来的text对象)的value属性值设置为“子窗口值”

    注意:这里只能传id,不能传name

    a.html代码如下

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>a.html</title>

    </head>

    <body>

    <input type=text id=test1 value=''>

    <input type=button value=" OK " onclick='window.showModalDialog("b.html", test1)'>

    </body>

    </html>

    b.html代码如下

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>b.html</title>

    <script language=javascript>

    function func1(){

    //获取父窗口传过来的参数

    var ptextid = window.dialogArguments;

    if(ptextid != undefined){

    //将父窗口传过来的对象的值改为“子窗口值”

    ptextid.value = "子窗口值";

    //关闭子窗口

    window.close();

    }

    }

    </script>

    </head>

    <body>

    <input type=button value=" OK " onclick=func1()>

    </body>

    </html>

    如果需要操作的父窗口对象比较多,也可以将window或window.document作为参数传给子窗口。

    例:

    需求

    a.html中添加id为“aform”的的form,form中有id为test2的文本框,在b.html中,除了进行上面的操作之外,还要将test2的值改为“子窗口值2”,并将form提交到c.html。

    实现1

    将a.html中打开对话框的函数改为如下方式:

    window.showModalDialog("b.html", window.document);

    将b.html中func1()改为如下:

    function func1(){

    var pdoc = window.dialogArguments;

    if(pdoc!=undefined){

    pdoc.all.test1.value="子窗口值";

    pdoc.all.test2.value="子窗口值2";

    pdoc.all.aform.action="c.html";

    pdoc.all.aform.submit();

    }

    }

    实现2

    因为在子窗口中对父窗口进行的操作比较多,也可以采用execScript的方式实现。

    将a.html中打开对话框的函数改为如下方式:

    window.showModalDialog("b.html", window);

    添加javascript函数如下

    function func(){

    test1.value="子窗口值";

    document.all.test2.value="子窗口值2";

    aform.action="c.html";

    aform.submit();

    }

    将b.html中func1()改为如下: 

    function func1(){

    var pwin = window.dialogArguments;

    if(pwin!=undefined){

    var codeStr = "func();"

    pwin.execScript(codeStr,"javascript");

    window.close();

    }

    }

  • 相关阅读:
    LyX使用中的一些问题
    Mac OS apache php配置
    MySQL utf8mb4 字符集:支持 emoji 表情符号
    java.util.NoSuchElementException: Timeout waiting for idle object
    MyEclipse 2014跟2015破解
    No row with the given identifier exists:
    Android启动icon切图大小
    Android接入百度自动更新SDK
    Android自定义spinner下拉框实现的实现
    android给View设置边框 填充颜色 弧度
  • 原文地址:https://www.cnblogs.com/mushaobai/p/3160332.html
Copyright © 2011-2022 走看看