`
落地窗
  • 浏览: 429240 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

window.parent与window.opener的区别 javascript调用主窗口方法

 
阅读更多
window.parent与window.opener的区别 javascript调用主窗口方法
1:   window.parent 是iframe页面调用父页面对象
举例:
a.html

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中写

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

实例地址:  http://www.cnspry.cn/blog/attachments/window.parent 实例/a.html
源码:
1.a.html

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> 

1.b.html

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 打开的子页面调用父页面对象
实例地址:  http://www.cnspry.cn/blog/attachments/window.opener 实例/a.html

源码:
2.a.html

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代码
<html> 
    <head> 
        <title>子页面</title> 
        <script type="text/javascript"> 
         /** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */   
         var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数"; 
         function UpdateParent() 
         { 
              var _parentWin = window.opener; 
              _parentWin.form1.username.value = "xxxx" ;  //username是父页面的参数,或者写为document.getElementId("username")
         } 
         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> 
经过hanjs的提醒,确实需要注意的是,模态窗口的子窗口是没有办法修改父窗口页面中的任何内容的。
例如修改: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");
在子窗口中当希望修改父窗口中的内容时,会弹出“某某”为空或不是对象的错误,而这里的“某某”就是你想修改的父窗口中的内容。

分享到:
评论

相关推荐

    showModalDialog open弹出子窗口操作parent、opener父窗口及跨域处理

    2&gt; 父窗口与子窗口传递值的方式也有所不同,在子窗口中操作父窗口也语法也不同,分别为var parentObjs = window.dialogArguments;opener.parentObj.elementObj.arrtr = 'str'; 3&gt; IE与FireFox对两个弹出窗口在...

    jsp 刷新父页面

    window.opener.location.href = window.opener.location.href 刷新以winodw.showModelDialog()方法打开的窗口 window.parent.dialogArguments.document.execCommand('Refresh'); 或 Response.Write("&lt;script&gt;...

    Javascript中封装window.open解决不兼容问题

    对window.open进行封装, 使其更好用, 且更兼容, 很多人说window.open不兼容,其实不是, 因为不能直接执行, 必须通过用户手动触发才行;看代码: 代码如下 var openWindow = function(url, options) { var str = ""; ...

    解析jquery获取父窗口的元素

    对应javascript版本为window.parent.document.getElementByIdx_x(“父窗口元素ID”);取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent...

    字符串 window.open() window.opener window.name window对象等的总结

    2个页面,加了注释,很清晰。

    javascript window.opener的用法分析

    window.opener 返回的是创建当前窗口的那个窗口的引用

    JS window对象的top、parent、opener含义介绍

    例如:A页面通过window.open()方法弹出了B页面,在B页面中就可以通过opener来引用A页面,这样就可以通过这个对象来对A页面进行操作。 3.parentparent用于在iframe,frame中生成的子页面中访问父页面的对象。例如:A...

    parent和opener的区别

    parent和opener的区别 parent和opener的区别

    window.opener用法和用途实例介绍

    既然在子窗体中能够拿到父窗体的引用,那么就可以在子窗体中设置父窗体的字段值或者调用js方法。 实例:添加人员信息时,其中的机构信息通过子窗体完成输入 父亲窗体,用于添加人员信息。 子窗体完成输入后,机构...

    通过window.opener控制父窗体

    可以看一看啊 博文链接:https://bageer707.iteye.com/blog/74458

    解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题

    打开新窗口并且关闭本窗口不弹出要关闭窗口前的提示function openWin(){window.open(‘login.jsp’,”,’fullscreen=yes,menubar=no,resizable=no’);window.opener=null;window.close();} 在IE7下为 function ...

    js AspxButton的客户端操作

    javascript调用父窗口(父页面)的方法 window.parent与window.opener的区别 javascript调用主窗口方法 1: window.parent 是iframe页面调用父页面对象 2: window.opener 是window.open 打开的子页面调用父页面对象...

    javascript常用对象梳理

    熟练掌握window对象的status、location、name、self、opener属性的使用 Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY、FRAMESET或FRAME元素时,...

    javascript关于open.window子页面执行完成后刷新父页面的问题分析

    本文实例分析了javascript关于open.window子页面执行完成后刷新父页面的方法。分享给大家供大家参考。具体分析如下: 主页面: &lt;input id=btnAdd type=button onclick=openWin(); value=添加 /&gt; 在js中有如下...

    JS子父窗口互相操作取值赋值的方法介绍

    对应javascript版本为window.parent.document.getElementByIdx_x(“父窗口元素ID”); 取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent...

    用window.open,opener实现网页间通信

    如果网页 A 可以发送信息到网页 B,反之也然,而不必动用请求/应答模式,该是一件多么惬意的事儿。可以轻松地实现聊天不是吗?

    javascript提示类

    某页面中button按钮事件写代码如下: ... Response.Write("&lt;script&gt;window.open('" + Str1 + "','_blank');window.showModalDialog('close.htm');...&lt;body onload="window.parent.opener=null;window.close();"&gt; &lt;/html&gt;

    javascript函数的解释

    72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener...的多重继续. 73.JS中的self指的是当前的窗口 74.JS中状态栏显示内容:window.status="内容" 75.JS中的top指的是框架集中最顶层的框架 76.JS中...

Global site tag (gtag.js) - Google Analytics