zoukankan      html  css  js  c++  java
  • Web开发:"父窗口"与"弹出子窗口"之间的刷新, 传值(转载)

    说明:转载自http://maxwolf.cnblogs.com/archive/2005/12/06/291889.aspx

    Web开发中适当运用一些弹出子窗口有很多好处,可以节省页面设计代价,获得好的用户体验,在最近项目开发中我遇到了几个父子窗口的问题,现在整理给大家,希望有所帮助.
                  
       情景一: 打开某一子窗口, 子窗口中任一按钮点击时候不能弹出新页面,进行完操作后,关闭该子窗口,刷新父窗口.        
           
                     1: 页面A:父窗口,其中有一个打开子窗口的链接,<a  href="#"onclick="open()
    ">页面C</a>
                          A中有如下js代码:

    <script language="JavaScript">
       
    function open()
       {
         window
    .showModalDialog("页面B");
       }
    </script>

                    2: 页面B,此为中间页,起过渡作用
                         B html 代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>**</title>
    </head>

    <frameset rows="0,*">
        
    <frame src="about:blank">
        
    <frame src="页面C">
      
    </frameset><noframes></noframes>
    </html>

                     3:页面C ,要打开的子窗口.
                        它关闭时候刷新父窗口很简单,只要把A中
                        <a  href="#"onclick="open()">页面C</a>  改为
                        <a  href="页面A"onclick="open()">页面C</a>

                      2: 页面B,要打开的子窗口,关闭时候触发window.opener.location.reload();window.close();即可刷新父窗口并且关闭子窗口.

       
         情景三:打开某一子窗口,   让用户选择要添加的东东,譬如要添加到文章里的相片选择后关闭子窗口,然后选择的东东出现在父窗口里.
                        在下图中,我点击"添加照片"链接然后弹出子窗口,在子窗口中选择后点击"添加照片"按钮,子窗口自动关闭,并且父窗口"已添加照片:"下面列出了我选择的照片。

            
          
                

                   实现方法:类似情景一需要中间页面B , 只是子窗口C中点击"添加按钮"时触发的js事件中,除了获得选中的checkbox的值外,还要把获得的值回传给父窗口,传值回去的代码如下.
                  

        情景二:打开某一需要用到activex控件子窗口, 子窗口中任一按钮点击时候不能弹出新页面,进行完操作后,关闭该子窗口,刷新父窗口.  
                      此时候就不能用window.showModalDialog()事件打开模式对话框了因为activex控件会报错,必须用

    window.open()
     
                      1: 页面A:父窗口,其中有一个打开子窗口的链接,<a  href="#"onclick="open()">页面B</a>
                          A中有如下js代码.

    <script language="JavaScript">
    function open()
     {
       window
    .open("页面B",'upload', 'height=400, width=420, top=0, left=0, toolbar=no, menubar=no,scrollbars=no, resizable=no,location=no, status=no');
     }
    </script>

    关于web开发,推荐使用firefox浏览器调试网页,效率更高。

  • 相关阅读:
    centos7安装kubenetes
    用户密码字典
    curl使用
    docker部署rabbitmq集群
    记一次使用docker搭建fastdfs服务的过程
    filebeat删除多余标签
    Python format格式化输出
    python3 统计NGINX pv uv 最多IP访问
    linux修改网卡名为eth0
    模式查找
  • 原文地址:https://www.cnblogs.com/jackljf/p/3589165.html
Copyright © 2011-2022 走看看