父子页面相互调用是一个在开发中经常遇到的问题，但是没有找到过比较全面的文章介绍。在此总结下来，供大家参考。
四种方式
一般情况下，我们可以使用iframe、window的open、showModalDialog、showModelessDialog方法这四种方式打开一个子窗口。(showModalDialog、showModelessDialog是IE独有的。)
下面分这四种方式来讨论如何父子页面互相调用。
分情况讨论
iframe
在这种情况下，子页面直接通过parent.var就可以对父页面的变量和方法进行操作。
父页面可以通过拿到iframe的contentWindow对象来访问子页面的window。
父页面代码，文件名为iframe.html。
|
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title></title>
</head>
<body>
<script>
var testVar = "我是父窗口测试变量";
var childFrame;
function getChildVar(){
var childFrame =
document.getElementById("childFrame");
var childWindow =
childFrame.contentWindow
alert(childWindow.testVar);
}
</script>
<iframe id="childFrame"
name="childFrame" frameBorder="0" src="iframe.child.html"
style="border:1px solid black;">
</iframe>
<br />
<button
onclick="getChildVar();">拿到子页面的变量</button>
</body>
</html>
|
子页面代码，文件名为iframe.child.html。
|
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title></title>
</head>
<body>
<script>
var testVar = "我是子窗口测试变量";
</script>
我是在IFrame中的子窗体。
<button onclick="alert(parent.testVar);">拿到父页面的testVar</button>
</body>
</html>
|
open
使用window.open打开的子页面，在子页面中可以通过window.opener来访问父页面的window对象。
在父页面中，可以通过window.open方法的返回值拿到子页面的window，就可以操作子页面的变量和方法。
父页面代码，文件名为window.open.html。
|
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>window.open父页面</title>
</head>
<body>
<script>
var testVar = "我是父窗口测试变量";
var childFrame;
function openWindow(){
childFrame =
window.open("window.open.child.html");
}
function getChildVar(){
alert(childFrame.testVar);
}
</script>
<button
onclick="openWindow();">使用window.open打开子页面</button>
<button
onclick="getChildVar();">拿到子页面的变量</button>
</body>
</html>
|
子页面代码，文件名为window.open.child.html。
|
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>window.open子页面</title>
</head>
<body>
<script>
var testVar = "我是子窗口测试变量";
alert(window.opener.testVar);
</script>
</body>
</html>
|
showModalDialog
使用showModalDialog打开的子页面，如果想访问父页面的window，需要在执行showModalDialog方法的时候，把父页面的window当作参数传递过去。见父页面的代码。
因为showModalDialog是阻塞的，父页面的代码在子页面不关闭之前无法继续执行，所以只能通过returnValue拿到子页面的变量，见子页面的代码。
父页面代码，文件名为ShowModalDialog.html。
|
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>ShowModalDialog父页面</title>
</head>
<body>
<script>
var testVar = "我是父窗口测试变量";
function openDialog(){
var testVar =
showModalDialog("ShowModalDialog.Child.html",window);
alert(testVar);
}
</script>
<button
onclick="openDialog();">OpenDialog</button>
</body>
</html>
|
子页面代码，文件名为ShowModalDialog.Child.html。
|
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>ShowModalDialog子页面</title>
</head>
<body>
<script>
var testVar = "我是子窗口测试变量";
function getParent(){
var parentWindow =
window.dialogArguments;
alert(parentWindow.testVar);
}
function closeMe(){
returnValue = testVar;
window.close();
}
</script>
我是使用ShowModalDialog打开的子页面。
<br />
<button
onclick="getParent()">getParent</button>
<button onclick="closeMe()">closeMe</button>
</body>
</html>
|
showModelessDialog
使用showModelessDialog打开的子页面，同样需要在执行方法的时候，把父页面的window当作参数传递过去。
但不同之处在于showModelessDialog会直接返回子页面的window对象，不是阻塞的，可以直接对子页面的方法和变量进行访问。
父页面代码，文件名为ShowModelessDialog.html：
|
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>ShowModalDialog父页面</title>
</head>
<body>
<script>
var testVar = "我是父窗口测试变量";
function openDialog(){
var childWindow =
showModelessDialog("ShowModelessDialog.Child.html",window);
alert(childWindow.testVar);
}
</script>
<button
onclick="openDialog();">OpenDialog</button>
</body>
</html>
|
子页面代码，文件名为ShowModelessDialog.html。
|
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>ShowModalDialog子页面</title>
</head>
<body>
<script>
var testVar = "我是子窗口测试变量";
function getParent(){
var parentWindow =
window.dialogArguments;
alert(parentWindow.testVar);
}
function closeMe(){
returnValue = testVar;
window.close();
}
</script>
我是使用ShowModalDialog打开的子页面。
<br />
<button
onclick="getParent()">getParent</button>
<button
onclick="closeMe()">closeMe</button>
</body>
</html>
|
分享到：
相关推荐
### (JS)父子页面相互调用总结 在前端开发中，常常会遇到需要在不同的页面之间进行数据交换或状态同步的情况。特别是在涉及到`iframe`或`window.open`打开的新窗口时，这种需求更为常见。本文将详细介绍如何在父...
本示例聚焦于“父子页面数据相互传递”，旨在提供一种有效的方法来解决这一问题。 首先，我们来看一下父子页面的基本概念。在Web环境中，父页面通常指的是包含其他页面的页面，比如一个框架集或者一个弹出窗口。子...
"iframe父页面与子页面通信及相互调用方法"是一个重要的主题，涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面（Parent Page）**：包含`iframe`...
总结，WPF中的Window与Page相互调用涉及导航、事件、依赖属性和MVVM模式等多个方面。理解并熟练运用这些技术，可以构建出具有高效交互和流畅导航的现代应用程序。在AppDemo项目中，你可以找到更多关于WPF导航框架的...
在介绍layer弹出层父子页面事件相互调用方法之前，首先需要了解layer弹出层的基本使用方法。layer是一种轻量级的Web弹出层插件，它可以帮助开发者方便地实现弹出层的创建、配置以及管理。在使用layer弹出层时，通常...
首先，父子页面之间的通信受到同源策略的限制，这意味着只有当两个页面具有相同的域名、协议和端口时，它们才能互相访问。但在某些情况下，可以通过设置`document.domain`属性来放宽这一限制，使得不同二级域名下的...
总的来说，实现"ie+FF通用的父子模态对话框相互传值"涉及到JavaScript的事件处理、跨窗口通信和CSS的模态设计。理解这些知识点并熟练运用，能帮助开发者创建出更好的交互体验。同时，要时刻关注浏览器的兼容性和最佳...
**iframe的父子、子与子之间的交互** 在Web开发中，有时我们需要在iframe中嵌入的页面与主页面，或者两个嵌套的iframe之间进行数据交换和功能交互。这可以通过JavaScript来实现，主要涉及以下几个方面： 1. **父...
总结，"jquery父子窗口互相获取元素demo"展示了如何在jQuery中实现跨窗口的DOM操作，这在一些特定场景下，如弹窗对话框或者多窗口应用中非常有用。通过正确理解和使用上述技术，开发者可以构建更加复杂且互动性强的...
下面我们将详细讨论`iframe`的父子窗口之间对象相互调用的基本用法。 1. **子窗口调用父窗口的JS方法**： 子窗口可以通过`parent`关键字来访问父窗口的全局对象和方法。例如，假设在子窗口中有这样一个方法调用： ...
以下是关于JavaScript父子窗口间调用方法的知识点总结。 一、父窗口与子窗口的定义 在JavaScript中，当我们通过window.open()方法打开一个新的窗口时，这个新窗口相对于原始页面被称为子窗口，而原始页面则被称作父...
这种交互通常发生在父子页面（通过iframe）或打开窗口与母窗口之间。本篇文章将详细探讨如何实现这些跨页面的DOM访问。 首先，我们来看**iframe子页面与父页面之间的访问**： 1. **访问DOM**： - 父页面访问子...
而在实际项目开发过程中，经常会利用iframe在一个父页面中嵌入另外一个子页面，或者在一个父页面中弹出另一个页面，由于同源策略的限制，父子页面之间的脚本无法实现通信，而使用postMessage方法就实现了父子页面...
### JavaScript父子页面跨域通信详解 #### 一、引言 在现代Web开发中，跨域通信是一个常见的问题。由于浏览器的安全策略——同源策略(Same-origin policy)的存在，JavaScript在处理不同源之间的数据交互时会受到...
总结以上内容，通过JavaScript操作iframe父子窗体可以实现父窗口和子窗口间的数据访问和方法调用。这种方式常用于网页中嵌入第三方页面时，父页面需要与嵌入的页面进行交互的场景。在进行操作时，需要注意同源策略的...
因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图： 我需要这样一个饼图，并且接下来在很多次地方要用到。 直接复制官网的代码，再改改数据，需要用的时候直接拿来用。 但是接下来出现了一...
总结，实现Layui的layer父页面和子页面的数据交互主要依赖于`parent`关键字，以及对Layui组件的理解和使用。在实际开发中，应根据具体需求选择合适的数据传递方式，确保数据的安全性和正确性。同时，深入阅读官方...
下面详细介绍如何在不同浏览器环境下实现父窗口和子窗口之间的相互调用。 ### 一、基本调用方法 #### 1. 父窗口调用子窗口 在HTML中，我们首先为`iframe`定义一个`name`属性，如`...
1. **提高开发效率**：组件化可以让开发者快速构建页面，因为许多组件可以直接复用。 2. **方便重复使用**：组件可以在多个地方使用，避免代码冗余。 3. **简化调试步骤**：每个组件相对独立，定位问题和修复变得更...