zoukankan      html  css  js  c++  java
  • window.parent与window.opener、window.showModalDialog的区别 opener和showModalDialog刷新父页面的方法

    1:   window.parent 是iframe页面调用父页面对象

    a.html
     
    复制代码
    <html>  
        <head><title>父页面</title></head>  
    <body>  
        <form name="form1" id="form1">  
             <input type="text" name="username" id="username"/>  
        </form>  
        <iframe src="b.html" width=100%></iframe>  
    </body>  
    </html>  
    复制代码

    如果我们需要在b.htm中要对a.htm中的username文本框赋值,就如很多上传功能,上传功能页在Ifrmae中,上传成功后把上传后的路径放入父页面的文本框中
    我们应该在b.html中写

    <script type="text/javascript">  
        var _parentWin = window.parent ;  
        _parentWin.form1.username.value = "xxxx" ;  
    </script>  

    实例源码:

    1.a.html

    复制代码
    <html>  
    <head>  
        <title>主页面</title>  
        <script>  
            /** 为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 */  
            var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";  
            function parentInvokeIFrame()  
            {  
                    var iframeTest = document.frames["iframeTest"]; //使用document.getElementById("iframeTest");同样可以  
                    alert(iframeTest.document.body.innerHTML);  
                    alert(iframeTest.iFrameVair);  
            }  
        </script>  
    </head>  
    <body>  
    <form name="form1" id="form1">  
        <input type="text" name="username" id="username"/>  
        <input type = "button" value = "父窗口调用IFrame子窗口中的内容" onclick = 'parentInvokeIFrame()'/>  
    </form>  
    <iframe src="b.html" width = '100%' id = 'iframeTest'></iframe>  
    </body>  
    </html>  
    复制代码

    .b.html

    复制代码
    <html>  
         <head>  
             <title></title>  
             <script type="text/javascript">  
                /** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */  
             var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数";  
               
             function UpdateParent()  
             {  
                 var _parentWin = window.parent ;  
                 _parentWin.form1.username.value = "xxxx" ;  
             }  
               
             function childInvokeParent()  
             {  
                    var parentVairous = window.parent.window.parentVairous;  
                    alert(parentVairous);     
             }  
           </script>  
        </head>  
    <body>  
         <form name="form1" id="form1">  
             <p>  </p>  
             <p align="center">  
                <input type = "button"   
                       name = "button"   
                       id = "button"   
                       value = "更新主页面的UserName内容"   
                       onclick = "UpdateParent()">  
                <input type = "button"  
                             name = "button2"  
                             id = "button2"  
                             value = "测试IFrame子窗口调用父窗口的全局变量"  
                             onclick = "childInvokeParent();"/>  
             </p>  
             <p>  </p>  
         </form>  
    </body>  
    </html>  
    复制代码

     

    ps:不能跨域获取,例如iframe的src是'http://www.xxx.ccc/'就不可以

     

    2:   window.opener 是window.open 打开的子页面调用父页面对象

    源码:
    2.a.html

    复制代码
    <html>  
    <head>  
         <title>主页面</title>  
         <script type="text/javascript">  
         /** 为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 */    
         var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";   
           
         /**   
          *  因为不同于IFrame(IFrame有id,window.open()与IFrame的父子窗口的模式不同),  
          *  所以当是通过window.open()方法打开一个新窗口使, 必须有一个新窗口的对象   
          *  当然必须先让子窗口弹出来, 才能调用子窗口中的变量, 否则抛出异常  
          */  
         var OpenWindow;  
           
         function openSubWin()  
         {  
             OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,location=no, status=no');  
         }  
         function parentInvokeChild()    
         {    
             if(OpenWindow)//当然必须先让子窗口弹出来, 才能调用子窗口中的变量, 否则抛出异常           
             {  
                   alert(OpenWindow.iFrameVair);  
             }  
         }   
         </script>  
    </head>  
    <body>  
        <form name="form1" id="form1">  
            <input type="text" name="username" id="username"/>  
            <input type="button" value="弹出子页面" onclick = "openSubWin()">  
            <input type="button" value="测试调用弹出窗口中的全局变量" onclick = "parentInvokeChild()">  
        </form>  
    </body>  
    </html>  
    复制代码

    2.b.html

    复制代码
    <html>  
        <head>  
            <title>子页面</title>  
            <script type="text/javascript">  
             /** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */    
             var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数";  
             function UpdateParent()  
             {  
                  var _parentWin = window.opener;  
                  _parentWin.form1.username.value = "xxxx" ;  
             }  
             function childInvokeParent()    
             {    
                  var parentVairous = window.opener.window.parentVairous;    
                  alert(parentVairous);       
             }  
            </script>  
        </head>  
    <body>  
    <form name="form1" id="form1">  
    <p>  </p>  
    <p align="center">  
        <input type="button"   
                   onclick = "UpdateParent();"   
                   name="button"   
                   id="button"   
                   value="更新主页面的UserName内容">  
        <input type = "button"    
               name = "button2"    
               id = "button2"    
               value = "测试IFrame子窗口调用父窗口的全局变量"    
               onclick = "childInvokeParent();"/>    
    </p>  
    <p>  </p>  
    </form>  
    </body>  
    复制代码

    经过网友的提醒,确实需要注意的是,模态窗口的子窗口是没有办法修改父窗口页面中的任何内容的。
    例如修改:OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,location=no, status=no');
    为:OpenWindow = window.showModalDialog("b.html",'newwindow',"dialogHeight:100px,center:yes,resizable:no,status:no");
    在子窗口中当希望修改父窗口中的内容时,会弹出“某某”为空或不是对象的错误,而这里的“某某”就是你想修改的父窗口中的内容

    需要注意的是:模态窗口调用父窗口也是window.parent来处理的。但是模态和window.open有个功能上的区别就是,模态的窗口不能刷新父页面(刷新整个页面,比如用window.location或form.submit等的处理),而使用window.open就可以进行刷新父窗口的操作

     

    说说javascript中几个内置对象的含义和使用方法。opener,self,parent

    opener:对打开当前窗口的window对象的引用,如果当前窗口已被用户打开,则opener的值为null.

    self:自引用属性,是对当前window对象的应用,与window属性同义.

    self代表自身窗口,opener代表打开自身的那个窗口,比如窗口A打开窗口B.如果靠window.open方法,则对于窗口B,self代表B自己,而opener代表窗口A.

    opener即谁打开我的,比如A页面利用window.open弹出了B页面窗口,那么A页面所在窗口就是B页面的
    opener,在B页面通过opener对象可以访问A页面。
    parent表示父窗口,比如一个A页面利用iframe或frame调用B页面,那么A页面所在窗口就是B页面的parent。

    在JS中,window.opener只是对弹出窗口的母窗口的一个引用。比如:
    a.html中,通过点击按钮等方式window.open出一个新的窗口b.html。那么在b.html中,就可以通过

    window.opener(省略写为opener)来引用a.html,包括a.html的document等对象,操作a.html的内容。
    假如这个引用失败,那么将返回null。所以在调用opener的对象前,要先判断对象是否为null,否则会出现“对象为空或者不存在”的JS错误。

    复制代码
    <html>
    <body>
    <form. name=form1>
    <input type=text name=inpu >
    <input type=button   >
    </form>
    </body>
    </html>
    复制代码

    ——————————–
    back2opener.html
    ——————————–

    复制代码
    <html>
    <body>
    <form. name=form1>
    <input type=text name=inpu >
    
    <a href=# >添加</a>
    </form>
    </body>
    </html>
    复制代码

    window.opener 返回的是创建当前窗口的那个窗口的引用,比如点击了a.htm上的一个链接而打开了
    b.htm,然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中,就可以

    写为:
    window.opener.document.getElementById(“name”).value = “输入的内容”;

     

    下面是opener和showModalDialog刷新父页面的方法:

    opener:关闭自己window.close();
    刷新父页面opener.location.reload();
    应该先刷新,再关闭.

    showModalDialog 的时候:

    在子窗口中输出javascript代码windows.returnValue= '1 ',在父窗口中if(showModalDialog(...)== '1 ')   refresh(); 
    refresh()为你自己写的JAVASCRIPT函数,用于刷新页面。

    也可以解释如下:
    1.在打开窗口得时候把父窗体做为参数传递给新窗口 
      window.showModalDialog(url,window,style); 
    2.在新打开得窗口得unload得事件中写如下代码: 
    var   args   =   window.dialogArguments; 
    args.location.reload(); 

    实例:
    复制代码
    <!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN "> 
    <HTML> 
    <HEAD> 
    <TITLE>   New   Document   </TITLE> 
    <META   NAME= "Generator "   CONTENT= "EditPlus "> 
    <META   NAME= "Author "   CONTENT= " "> 
    <META   NAME= "Keywords "   CONTENT= " "> 
    <META   NAME= "Description "   CONTENT= " "> 
    <script   language= "javascript "> 
    <!-- 
    function   doSearch(){ 
    var   s   =   new   Object(); 
    s.name   = "aaa "; 
    var   k   =   window.showModalDialog( "child.html ",s, "dialogWidth:235px;status:no;dialogHeight:185px "); 
    if(k.type== " ")//传递回的type为空的时候才刷新页面。 
    { 
    alert( "刷新 "); 
    location.reload(); 
    } 
    } 
    //--> 
    </script> 
    </HEAD> 
    
    <BODY> 
    <input   type   = "button "   value= "openChild "   onclick= "doSearch() "> 
    </BODY> 
    </HTML> 
    复制代码

    child.html :

    复制代码
    <!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN "> 
    <HTML> 
    <HEAD> 
    <TITLE>   New   Document   </TITLE> 
    <META   NAME= "Generator "   CONTENT= "EditPlus "> 
    <META   NAME= "Author "   CONTENT= " "> 
    <META   NAME= "Keywords "   CONTENT= " "> 
    <META   NAME= "Description "   CONTENT= " "> 
    
    <SCRIPT   LANGUAGE=javascript   FOR=window   EVENT=onload> 
    <!-- 
    var   s   =   new   Object();//这里是关键若用户为单击按钮,已其它方式关闭按钮,则把type= " "   传递回去。以免出现问题。且刷新父页面。 
    s.type= " "; 
    window.returnValue   =   s; 
    //--> 
    </SCRIPT> 
    
    </HEAD> 
    
    <BODY> 
    <input   type   = "button "   value= "返回不刷新 "   onclick= "doSearch() "> 
    </BODY> 
    </HTML> 
    
    <script   language=javascript> 
    <!-- 
    var   k=window.dialogArguments; 
    //使用传递过来的 "aaa "; 
    //.......... 
    function   doSearch() 
    { 
    var   s   =   new   Object(); 
    s.type= "OK ";//设置返回值。//这里返回不刷新父页面。 
    window.returnValue=s; 
    window.close(); 
    }    
    //--> 
    </script>
    复制代码
     
  • 相关阅读:
    AcWing 1027. 方格取数 dp
    AcWing 1014. 登山 dp
    acwing 482. 合唱队形 dp
    LeetCode 1463. 摘樱桃II dp
    LeetCode 100. 相同的树 树的遍历
    LeetCode 336. 回文对 哈希
    LeetCode 815. 公交路线 最短路 哈希
    算法问题实战策略 DARPA大挑战 二分
    算法问题实战策略 LUNCHBOX 贪心
    AcWing 1100. 抓住那头牛 BFS
  • 原文地址:https://www.cnblogs.com/opaljc/p/2688956.html
Copyright © 2011-2022 走看看