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");
在子窗口中当希望修改父窗口中的内容时，会弹出“某某”为空或不是对象的错误，而这里的“某某”就是你想修改的父窗口中的内容。
分享到：
相关推荐
在JavaScript中，有时我们需要从一个子窗口（通常是通过`window.open()`方法打开的新窗口）与父窗口（即打开该新窗口的原始窗口）之间进行交互。这种交互可能包括调用父窗口中的函数或修改父窗口中元素的状态等。...
例如，通过`window.opener`对象，子窗口可以访问到打开它的父窗口，而`iframe`内的脚本可以通过`parent`对象与父页面通信。 - 父窗口调用子窗口： ```javascript let newWindow = window.open('...'); newWindow....
在Web开发中，`window.open()`方法用于创建一个新的浏览器窗口或标签页，并返回对新打开窗口的引用。这个方法在很多场景下非常有用，比如用来实现弹出窗口、跳转链接等功能。然而，由于浏览器的安全策略和用户体验...
总结一下，子窗口向父窗口传递值主要依赖于`window.parent`和`window.opener`这两个属性，它们允许子窗口访问并操作父窗口的DOM元素。通过结合查询字符串传递初始数据和JavaScript操作，可以实现复杂的跨窗口通信。...
这里假设父窗口有一个名为 `frameName` 的框架，可以通过 `window.opener.frames[frameName]` 来访问它，然后使用 `location.reload()` 方法来刷新该框架。 #### 四、示例代码分析 在提供的示例代码中，我们可以...
在HTML编程中，模态窗口（Modal Dialog）是一种常见的用户界面设计模式，它可以在主页面上弹出一个不可忽略的窗口，用户必须先处理模态窗口中的内容才能继续与主页面交互。模态窗口通常用于确认操作、输入数据或者...
1. **跨域限制**：如果子窗口的URL与父窗口不同源，则不能通过`window.opener`或`window.parent`进行交互。 2. **安全性问题**：在处理窗口间通信时，应注意防止恶意脚本注入等安全风险。 3. **兼容性**：不同的...
1. **`window.opener`与`window.parent`的区别**： - `window.opener`：指的是打开当前窗口的窗口对象。只有当一个窗口是由另一个窗口通过`window.open()`打开时，该窗口才有`opener`属性。 - `window.parent`：指...
在JavaScript编程中，父窗口与子窗口之间的通信是一种常见的需求，特别是在构建多窗口应用程序或弹出窗口时。本文将深入探讨如何在JavaScript中实现父窗口与子窗口之间的数据传递。 首先，我们需要理解“父窗口”和...
javascript调用父窗口（父页面）的方法 window.parent与window.opener的区别 javascript调用主窗口方法 1： window.parent 是iframe页面调用父页面对象 2： window.opener 是window.open 打开的子页面调用父页面对象...
在使用 JavaScript 调用父窗口或父页面的方法时，我们需要区分 window.parent 和 window.opener 的区别。 window.parent 是 iframe 页面调用父页面对象，而 window.opener 是 window.open 打开的子页面调用父页面...
2. **在子窗口中调用父窗口方法**：在子窗口的JavaScript代码中，可以通过`window.opener`属性访问到父窗口的对象。如果父窗口有一个名为`parentMethod`的方法，可以在子窗口中这样调用： ```javascript window....
在JavaScript中，window.opener和window.parent这两个对象是用于在不同的窗口或框架之间进行交互的重要属性。它们各自代表了不同的概念和使用场景，下面将详细阐述它们的区别及用法。 ### window.opener window....
本文将详细介绍`window.opener`对象的使用方法及其应用场景，帮助开发者更好地理解如何实现弹窗与主窗口之间的数据交互。 #### 二、`window.opener`简介 `window.opener`对象是JavaScript中的一个特殊对象，它引用...
parent与opener的区别在于，parent是指当前页面的父级框架窗口，而opener是特指通过window.open()方法创建的新窗口的原始窗口。在FRAMESET中，一个FRAME的parent属性指向的是包含该FRAME的FRAMESET窗口。而opener则...
如果一个窗口是通过`window.open()`方法创建的，那么这个新窗口的`opener`属性会引用到创建它的原始窗口。这样，子窗口可以通过`window.opener`来访问或操作父窗口的属性和方法。 3. **页面动态更新**： 要实现...
2. 使用JavaScript实现自动刷新：通过`setTimeout`函数定时调用`window.location.reload()`，例如每1秒刷新一次页面：`setTimeout('myrefresh()',1000)`。 对于框架页面的刷新，有以下几种处理方式： 1. 刷新包含...
- 当我们在弹出层C中需要触发父页面A中的列表刷新时，可以通过访问`window.parent.vm`或`window.top.vm`来获取之前绑定的数据模型，并调用其刷新方法。 ```javascript window.parent.vm.gridDataSource.filter({}...
在子窗口中，调用`parent.postMessage(data, targetOrigin)`，其中`data`是你要传递的数据，`targetOrigin`是接收消息的窗口的源（协议+主机+端口）。 - 父窗口需要监听`message`事件，以接收子窗口发送过来的数据...
然而，`window.close()`并不像其他JavaScript方法那样简单易用，因为它受到浏览器的严格限制，尤其在兼容性和安全性方面。本文将深入探讨`window.close()`的使用方法和潜在问题。 **1. window.close()的使用语法** ...