`

javascript调用父窗口（父页面）的方法

JavaScriptHTMLBlog 
阅读更多
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");
在子窗口中当希望修改父窗口中的内容时，会弹出“某某”为空或不是对象的错误，而这里的“某某”就是你想修改的父窗口中的内容
分享到：
| js窗口&提示大全
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    在EasyUI中，我们可能会遇到需要在弹出窗口（子页面）与父页面之间进行数据传递或调用父页面方法的需求。下面将详细讲解这个过程。 首先，让我们理解标题中的“弹出window窗口传值”。在EasyUI中，创建一个弹出窗口...

    JavaScript实现IFrame子窗口调用父窗口的全局变量

    JavaScript实现IFrame子窗口调用父窗口的全局变量

    html 模态窗口子窗体调用父窗体的任何函数

    // 调用父窗口的函数 if (parentWindow && parentWindow.parentFunction) { parentWindow.parentFunction(); } }); ``` 3. **安全检查**：在实际应用中，确保父窗口存在且已定义了要调用的函数是非常重要的。在...

    JS子窗口调用父窗口

    ### JS子窗口调用父窗口的关键知识点 #### 一、基本概念 在JavaScript中，有时我们需要从一个子窗口（通常是通过`window.open()`方法打开的新窗口）与父窗口（即打开该新窗口的原始窗口）之间进行交互。这种交互...

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

    ### JavaScript 子窗口与父窗口交互详解 在前端开发中，常常会遇到需要在一个窗口（通常称为父窗口）中打开另一个窗口（子窗口）的情况。这时，如何实现这两个窗口之间的数据交互便成了一个重要的问题。根据题目...

    父窗口调用iframe子窗口方法

    在Web开发中，"父窗口调用iframe子窗口方法"是一个常见的交互场景，尤其是在构建复杂的单页面应用或者需要跨窗口通信时。这篇文章将详细讲解如何实现这个功能，并提供相关的源码示例。 首先，理解基本概念。`iframe...

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

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

    父窗口与子窗口间的调用

    本文将详细介绍如何使用JavaScript实现父窗口与子窗口之间的调用以及值的传递。 #### 一、基本概念 1. **父窗口**：通常指打开新窗口的原始页面。 2. **子窗口**：由父窗口通过`window.open()`方法打开的新窗口。 ...

    javascript提交父窗口

    在探讨“javascript提交父窗口”这一主题时，我们需要理解几个核心概念：JavaScript 是如何与浏览器中的不同窗口进行交互的，以及如何通过 JavaScript 来操作 DOM（文档对象模型）元素，特别是如何触发表单的提交...

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

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

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

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

    javascript 父窗口、子窗口传值问题

    通过这个引用，可以调用父窗口的函数或修改其变量： ```javascript // 子窗口 window.opener.parentFunction('childValue'); // 父窗口 function parentFunction(valueFromChild) { console.log...

    iframe父页面与子页面通信及相互调用方法

    "iframe父页面与子页面通信及相互调用方法"是一个重要的主题，涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面（Parent Page）**：包含`iframe`...

    frameset父页面和子页面的方法之间调用个属性的调用（页面上可以包含iframe）

    // 获取父窗口 var iframeWindow = parentWindow.frames['iframeName']; // 通过名称获取子页面的window对象 ``` 2. `contentWindow` 和 `contentDocument` 属性：这两个属性主要用于访问`iframe`的内容。`...

    iframe跨域调用父窗口js.zip

    但是，通过特定的技术手段，我们可以实现iframe跨域调用父窗口的JavaScript方法。本教程将详细讲解这一过程。 首先，我们需要了解同源策略。同源策略是浏览器为了保护用户安全而实施的一项机制，它规定只有当两个...

    Jquery调用iframe父页面中的元素及方法

    // 调用父页面的方法 alert(parent.hello); // 弹出父页面的变量 ``` 这表示我们可以通过window.parent对象访问父页面的全局变量和函数。 3. 实例： 文章提供了一个简单的示例来演示如何实现上述操作。在这个示例...

    JS刷新父页面 父窗口

    实现这一功能的关键是能够访问到父窗口对象，并调用其`location.reload()`方法。 #### 代码解析 首先来看一下提供的代码片段： ```javascript function refreshOpener() { var win = top.window; try { if ...

    JavaScript操作iframe父窗口和子窗口例子

    - 例如，调用父窗口的函数：`parent.myFunction()`；获取父窗口的变量：`var parentVar = parent.myVar`。 5. **跨窗口通信**： - 由于同源策略的限制，只有当父窗口和子窗口的源（协议+域名+端口）相同，它们...

    jsp与javascript配合,父窗口与子窗口之间刷新

    - **使用`opener.location.reload()`**：在子窗口中，你可以通过`opener`引用父窗口，然后调用`reload()`方法刷新父窗口的页面。 - **通过消息传递**：使用`window.postMessage()` API，子窗口可以向父窗口发送...

    js 调用父窗口的具体实现代码

    在实际开发中，除了上述直接调用父窗口的方法外，还可以利用`postMessage`和`message`事件进行异步通信，这种方式更加安全且兼容性更好。同时，考虑到不同浏览器的限制和安全问题，使用这些技术时应确保适当的权限...

Magicbox
Global site tag (gtag.js) - Google Analytics