<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function hello(){
alert("father.html");
}
function callChild()
{
//myFrame是iframe的name
//myFrame.window.functionName();
myFrame.window.hello(); //父窗口掉子窗口hello方法
}
</script>
</head>
<body>
<input type="button" value="调用子窗口hello方法" onclick="callChild()">
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>
========================================================================
<html>
<head>
<script type="text/javascript">
function hello()
{
alert("child.html");
}
function callParent(){
// parent.functionName();
parent.hello(); //子窗口掉父窗口hello方法
}
</script>
</head>
<body>
<input type="button" value="调用父窗口hello方法"onclick="callParent()">
</body>
</html>
转自：http://lichaobao.iteye.com/blog/2163088
分享到：
相关推荐
JavaScript实现IFrame子窗口调用父窗口的全局变量
"iframe父页面与子页面通信及相互调用方法"是一个重要的主题，涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面（Parent Page）**：包含`iframe`...
使用iframe的时候，可能会涉及到父子窗口之间传值和方法的相互调用，之前一直有些迷糊，也没有着意去弄清楚，这两天要干活，没法子了只好把这都弄明白了。其实非常简单，就那么几个用法，几句代码而已。 子窗口中...
这些操作对于动态加载内容到iframe以及进行父子页面间的交云非常有用。然而，对于跨域的问题，需要通过其他技术手段（如postMessage API）来解决。文章的总结部分提醒我们，虽然这里介绍的技术在同源情况下非常有用...
在处理`iframe`时，经常需要进行父子页面间的交互，例如从`iframe`调用父页面的函数或传递数据。下面我们将详细介绍`js`中`iframe`调用父页面方法的相关知识点。 1. **基本调用方式** 在`iframe`中的页面，可以...
### (JS)父子页面相互调用总结 在前端开发中，常常会遇到需要在不同的页面之间进行数据交换或状态同步的情况。特别是在涉及到`iframe`或`window.open`打开的新窗口时，这种需求更为常见。本文将详细介绍如何在父...
总结以上内容，通过JavaScript操作iframe父子窗体可以实现父窗口和子窗口间的数据访问和方法调用。这种方式常用于网页中嵌入第三方页面时，父页面需要与嵌入的页面进行交互的场景。在进行操作时，需要注意同源策略的...
- `contentWindow` 属性：通过`iframe`元素的`contentWindow`属性，我们可以获取到iframe内部的`window`对象，从而调用其上的方法或修改DOM。 - `window.postMessage()` 方法：这是一个安全的跨域通信方式，允许两...
- 存储共享：利用localStorage或sessionStorage，因为它们是在同源策略下共享的，因此父子窗口可以共享存储的数据。 5. **跨域问题** 由于浏览器的同源策略限制，如果iframe加载的页面与父页面不在同一域名下，...
`iframe`在父子窗口间的交互是常见的需求，例如，用户在子窗口中操作后需要更新父窗口的状态，或者反过来。下面详细介绍如何在不同浏览器环境下实现父窗口和子窗口之间的相互调用。 ### 一、基本调用方法 #### 1. ...
Layer弹出子iframe层父子页面传值的实现方法中，主要讲解了如何在使用Layer插件弹出的子iframe中与父页面进行数据传递和方法调用。这一过程对于动态生成的iframe尤为重要，能够帮助开发者实现更加灵活的页面交互功能...
综上所述，文章介绍的layer弹出层父子页面事件相互调用方法，不仅展示了layer插件的使用技巧，也涉及到了父子页面间交互的原理与实现。通过理解并掌握这些知识点，开发者能够更有效地在项目中应用父子页面的交互模式...
在本示例中，我们将探讨如何在不使用iframe框架的情况下，利用JavaScript实现父子窗口之间的简单传值。 首先，我们有一个父窗口页面`father.html`，其中包含一个按钮，当点击该按钮时，会打开一个子窗口`child....
7. **父子窗口通信**：JavaScript提供了`window.postMessage()`方法，允许不同源的窗口之间安全地传递消息。这对于父页面与iframe之间的通信至关重要，尤其是在跨域情况下。 8. **性能优化**：频繁的操作iframe可能...
- `window.name`属性是唯一不会在页面刷新时丢失的属性，可以用于在父子页面间传递数据，但这种方法的局限性在于只能存储字符串。 在提供的DEMO文件中，可能包含了以上一种或多种技术的示例。例如，a.html可能是父...
`iframe`的父子通信可以让我们实现不同页面间的交互，无论是同源策略下的非跨域通信，还是需要应对跨域场景。下面我们将详细介绍这两种情况下的实现方式。 ### 非跨域通信 #### 父调子 在非跨域情况下，父页面...
子页面则通过`doSubmit`方法处理用户选择，并调用父页面的`addRecord`方法传递数据。 通过以上的分析，我们可以看出layui的layer组件在iframe层中的交互功能非常灵活，能够满足开发者在多种场景下的需求。掌握这些...
本示例聚焦于“父子页面数据相互传递”，旨在提供一种有效的方法来解决这一问题。 首先，我们来看一下父子页面的基本概念。在Web环境中，父页面通常指的是包含其他页面的页面，比如一个框架集或者一个弹出窗口。子...