`

javascript调用父窗口(父页面)的方法

阅读更多
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> 

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

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

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

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

<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" ;  
         }  
         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> 

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

经过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");
在子窗口中当希望修改父窗口中的内容时,会弹出“某某”为空或不是对象的错误,而这里的“某某”就是你想修改的父窗口中的内容
分享到:
评论

相关推荐

    用浏览器打开新窗口后在父窗口中调用新窗口中的代码

    这段示例代码不但能在父窗口页面test.html中执行被打开的新窗口页面test-open.html中的代码,还可以随意调用其中的内容,甚至还可以在父窗口页面中使新窗口页面置顶(显示在最前面)。 代码已在当前的chrome , fire...

    用浏览器打开新窗口后在父窗口中调用新窗口中的代码的方法

    这段示例代码不但能在父窗口页面test.html中执行被打开的新窗口页面test-open.html中的代码,还可以随意调用其中的内容,甚至还可以在父窗口页面中使新窗口页面置顶(显示在最前面)。 代码已在当前的chrome , fire...

    用window.open打开新窗口后在父窗口中调用新窗口中的代码

    这段示例代码不但能在父窗口页面test.html中执行被打开的新窗口页面test-open.html中的代码,还可以随意调用其中的内容,甚至还可以在父窗口页面中使新窗口页面置顶(显示在最前面)。 代码已在当前的chrome , fire...

    js(javascript)子窗口和父窗口交互

    有两种方式 第一种:对于用window.open()方法打开的页面 第二种:用window.showModalDialog()

    JavaScript弹出窗口及与父窗口交互

    本文中我将展示如何在一个 ASP.NET 应用程序中创建一个弹出窗口 (使用 JavaScript)和如何从弹出窗口返回值到原始的调用页面并自动引发该页上的按钮的单击事件。另外,使用MultiView 控件和带分页的GridView 控件...

    javascript刷新父页面的各种方法汇总

    用iframe、弹出子页面刷新父页面iframe [removed] parent.location.reload();...子窗口刷新父窗口 [removed] self.opener.location.reload(); [removed] 刷新以open()方法打开的窗口 [removed] win

    JavaScript子窗口ModalDialog中操作父窗口对像

    1、不能使用window.parent Window.parent是用来在frame中进行操作的,在对话框中不能用来操作父窗口对象 2、正确的做法 调用modaldialog时通过传参数的方式操作 例: 需求 父窗口页面为a.html 子窗口页面为b.html。...

    JavaScript中的子窗口与父窗口的互相调用问题

    本文给大家介绍了JavaScript中的子窗口与父窗口的互相调用问题,非常不错,具有参考借鉴价值,需要的朋友参考下吧

    js AspxButton的客户端操作

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

    javascript 调用其他页面的js函数或变量的脚本

     下面的示例演示了一个弹出窗口如何调用起父窗口中的方法和变量。 父窗口:1.html  软件开发网 www.jb51.net 其它页面js变量调用方法代码 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]弹出窗口:2....

    JSP父页面传参数到子页面及接收示例

    1、父页面传参数到子页面 代码如下: //JavaScript代码 $.ajax({ type:”POST”, uri:”../student/studentInfo.action”, data:{ “date”:date, “stuNo”:stuNo }, success:function(data){ var params = “?...

    javascript网页特效实例大全(13-19)

    实例357 关闭弹出窗口时刷新父窗口 574 实例358 打开新窗口显示详细信息 575 实例359 弹出网页模式对话框 577 实例360 日期选择器 580 实例361 弹出提示对话框并重定向网页 584 实例362 打开指定大小的新...

    JavaScript网页特效范例宝典源码

    实例008 关闭弹出窗口时刷新父窗口 12 实例009 关闭IE主窗口时,不弹出询问对话框 13 1.2 弹出网页对话框 14 实例010 弹出网页模式对话框 14 实例011 弹出全屏显示的网页模式对话框 16 实例012 网页拾色器 18 实例...

    JS window.opener返回父页面的应用

    网上支付开发分为支付平台和客户端两部分。当客户端进入支付平台时,需要在新窗体打开支付平台页面。

    javascript常用对象梳理

    dependent:指定打开的窗口为当前窗口的一个子窗口,并随着父窗口的关闭而 关闭,选项的值及含义与toolbar相同; hotkeys:在没有菜单栏的新窗口中设置安全退出的热键,选项的值及含义与 toolbar相同; ...

    JavaScript详解(第2版)

    1.4 JavaScript及其在Web页面中的位置 3 1.5 Ajax是什么 5 1.6 JavaScript是什么样子的 6 1.7 JavaScript及其在Web开发中承担的角色 7 1.8 JavaScript和事件 9 1.9 标准化JavaScript和W3C 11 1.9.1 ...

    javascript学习笔记.docx

    同时还应该调用focus()方法使窗口成焦点保证窗口可见。opener属性是打开自己的那个窗口,若是用户手动打开,这位null。 8) 关闭窗口用window.close()方法,窗口关闭后,代表它的Window对象可能还生存,可用closed...

    ASP.NET开发实战1200例(第Ⅰ卷)第十二章

    父窗口 478 实例303 关闭IE主窗口时,不弹出询问对话框 480 实例304 利用JavaScript实现下降式窗口 481 实例305 利用JavaScript实现窗口自动滚动 482 12.3 JavaScript对时间、XML文档和 多媒体的操作 483 实例306 ...

Global site tag (gtag.js) - Google Analytics