via: http://www.php100.com/html/webkaifa/javascript/2009/0213/1658.html
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>
实例地址： 实例/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 打开的子页面调用父页面对象
实例地址： 实例/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" ;
}
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实现IFrame子窗口调用父窗口的全局变量
在EasyUI中，我们可能会遇到需要在弹出窗口（子页面）与父页面之间进行数据传递或调用父页面方法的需求。下面将详细讲解这个过程。 首先，让我们理解标题中的“弹出window窗口传值”。在EasyUI中，创建一个弹出窗口...
### JS子窗口调用父窗口的关键知识点 #### 一、基本概念 在JavaScript中，有时我们需要从一个子窗口（通常是通过`window.open()`方法打开的新窗口）与父窗口（即打开该新窗口的原始窗口）之间进行交互。这种交互...
// 调用父窗口的函数 if (parentWindow && parentWindow.parentFunction) { parentWindow.parentFunction(); } }); ``` 3. **安全检查**：在实际应用中，确保父窗口存在且已定义了要调用的函数是非常重要的。在...
在Web开发中，"父窗口调用iframe子窗口方法"是一个常见的交互场景，尤其是在构建复杂的单页面应用或者需要跨窗口通信时。这篇文章将详细讲解如何实现这个功能，并提供相关的源码示例。 首先，理解基本概念。`iframe...
### JavaScript 子窗口与父窗口交互详解 在前端开发中，常常会遇到需要在一个窗口（通常称为父窗口）中打开另一个窗口（子窗口）的情况。这时，如何实现这两个窗口之间的数据交互便成了一个重要的问题。根据题目...
这段示例代码不但能在父窗口页面test.html中执行被打开的新窗口页面test-open.html中的代码，还可以随意调用其中的内容，甚至还可以在父窗口页面中使新窗口页面置顶（显示在最前面）。 代码已在当前的chrome , fire...
本文将详细介绍如何使用JavaScript实现父窗口与子窗口之间的调用以及值的传递。 #### 一、基本概念 1. **父窗口**：通常指打开新窗口的原始页面。 2. **子窗口**：由父窗口通过`window.open()`方法打开的新窗口。 ...
这段示例代码不但能在父窗口页面test.html中执行被打开的新窗口页面test-open.html中的代码，还可以随意调用其中的内容，甚至还可以在父窗口页面中使新窗口页面置顶（显示在最前面）。 代码已在当前的chrome , fire...
这段示例代码不但能在父窗口页面test.html中执行被打开的新窗口页面test-open.html中的代码，还可以随意调用其中的内容，甚至还可以在父窗口页面中使新窗口页面置顶（显示在最前面）。 代码已在当前的chrome , fire...
通过这个引用，可以调用父窗口的函数或修改其变量： ```javascript // 子窗口 window.opener.parentFunction('childValue'); // 父窗口 function parentFunction(valueFromChild) { console.log...
"iframe父页面与子页面通信及相互调用方法"是一个重要的主题，涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面（Parent Page）**：包含`iframe`...
- 例如，调用父窗口的函数：`parent.myFunction()`；获取父窗口的变量：`var parentVar = parent.myVar`。 5. **跨窗口通信**： - 由于同源策略的限制，只有当父窗口和子窗口的源（协议+域名+端口）相同，它们...
- **使用`opener.location.reload()`**：在子窗口中，你可以通过`opener`引用父窗口，然后调用`reload()`方法刷新父窗口的页面。 - **通过消息传递**：使用`window.postMessage()` API，子窗口可以向父窗口发送...
但是，通过特定的技术手段，我们可以实现iframe跨域调用父窗口的JavaScript方法。本教程将详细讲解这一过程。 首先，我们需要了解同源策略。同源策略是浏览器为了保护用户安全而实施的一项机制，它规定只有当两个...
// 获取父窗口 var iframeWindow = parentWindow.frames['iframeName']; // 通过名称获取子页面的window对象 ``` 2. `contentWindow` 和 `contentDocument` 属性：这两个属性主要用于访问`iframe`的内容。`...
在探讨“javascript提交父窗口”这一主题时，我们需要理解几个核心概念：JavaScript 是如何与浏览器中的不同窗口进行交互的，以及如何通过 JavaScript 来操作 DOM（文档对象模型）元素，特别是如何触发表单的提交...
// 调用父页面的方法 alert(parent.hello); // 弹出父页面的变量 ``` 这表示我们可以通过window.parent对象访问父页面的全局变量和函数。 3. 实例： 文章提供了一个简单的示例来演示如何实现上述操作。在这个示例...
实现这一功能的关键是能够访问到父窗口对象，并调用其`location.reload()`方法。 #### 代码解析 首先来看一下提供的代码片段： ```javascript function refreshOpener() { var win = top.window; try { if ...
1. **使用window.parent对象**：在子页面的JavaScript代码中，我们可以访问到`window.parent`对象，它是对父窗口的引用。因此，可以直接调用`window.parent.location.reload()`来刷新父页面。这种方法简单直接，但...