zoukankan      html  css  js  c++  java
  • 关闭弹出窗体,刷新父页面

     功能:

          点击页面A,隐藏页面A的内容(如果是在动态网页中,弹出窗体做修改会用到,这里是静态页面用隐藏内容来做演示)

          弹出页面B,在页面B做修改后,关闭页面B,刷新页面A的数据。

     

    原理:

         在页面B的退出事件中,让父窗体的地址重新加载一遍。

      

    代码:

     1、页面A:

      

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> frmA</title>
    <style type="text/css">
    #txtV
    {
    width
    : 357px;
    }
    #btnOpen
    {
    width
    :auto;
    }
    </style>
    <!--点击btnOpen,清空当前txtV的值,弹出页面2-->
    <script language="javascript">
    function OpenB(){
    document.getElementById(
    "txtV").style.display="none";
    window.open(
    "frmB.html","","width=300,height=300");
    }
    </script>
    </head>

    <body>
    <div style="margin-left:100px;margin-top:100px;border:2px solid green;400px;padding:30px;">
    <input id="txtV" value="这是第一个页面的值,当弹出页面2时就会隐藏.不信试试?"
    type
    ="text"/><br /><br />
    <input id="btnOpen" onclick="OpenB()" value="弹出第二个页面" type="button" />
    </div>
    </body>
    </html>

    2、页面B

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> frmB</title>
    </head>

    <body onbeforeunload="window.opener.location.href=window.opener.location.href">
    <div style="200px;height:200px;border:2px solid green;margin-left:20px;
    margin-top:25px;padding:25px;font-family:微软雅黑;font-size:12px;"
    >
    在这里退出的时,可以看见frmA文本内容已经显示.
    <br /><br /><br />关闭吧!come on, baby!<br />
    <input onclick="Javscript:window.opener.location.href=window.opener.location.href;window.close()"
    value
    ="这里也可以关闭哦" type="button"/>
    </div>
    </body>
    </html>

    效果:

    1、点击前:

    2、点击后:

     

    3、关闭后:

     

       

      

  • 相关阅读:
    外观模式
    建造者模式
    原型模式
    工厂模式
    单例模式
    设计模式入门
    SpringBoot-SpringMVC开发总结
    SpringBoot日志
    IDEA Basics
    Kafka基础学习
  • 原文地址:https://www.cnblogs.com/307914070/p/1954157.html
Copyright © 2011-2022 走看看