注：原创作品，分享以供交流出处，转载请注明出处。
本博文环境IE8及以上，部分实例在firefox中不支持。
本博文实例的三个iframe在同域下。
总结：
1，子iframe访问父iframe中的元素。
parent.document.getElementById('parentInput');
2，父iframe访问子iframe中的元素（注：fireFox中不可以）。
document.frames['childIframe2'].document.getElementById('child2Input');
3，子页面访问父页面js全局变量及函数
var parentVariable = parent.parentVarName;
//parentVarName是父页面中的全局变量。
onclick="parent.parentFunction();
"//parentFunction是父页面上的函数。
实例：
1，父页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
//定义父页面上的全局变量
var parentVarName = "chenchaoyang";
//在父页面给子页面2上的input输入框赋值
function fuzhiChild2Input()
{
//下面这句在fireFox中可用，在ie下不可用
//var child2Input = document.getElementById('childIframe2').contentDocument.getElementById("child2Input");
//下面这句在ie下可用，在fireFox中不可用
var child2input = document.frames['childIframe2'].document.getElementById('child2Input');
child2input.value="chenchaoyang";
}
//定义父页面上的函数（供子页面调用）
function parentFunction()
{
alert("呵呵，这是父页面上的函数");
}
</script>
</head>
<body>
<iframe id="childIframe1" src="child1.jsp"></iframe>
<iframe id="childIframe2" src="child2.jsp"></iframe>
<input type="text" id="parentInput"/>
<input type="button" id="parentButton" onclick="fuzhiChild2Input();" value="给子页面2上的输入框赋值"/>
</body>
</html>
2,子页面1
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
//在子页面1上给父页面上的输入框赋值，在fireFox，ie中均可用
function getParentElement()
{
var parentInput = parent.document.getElementById('parentInput');
parentInput.value = "chenchaoyang";
}
//获取父页面上的全局变量
function getVarFromParent()
{
var parentVariable = parent.parentVarName;
alert(parentVariable);
}
</script>
</head>
<body>
这是子页面1
<input type="button" value="给父页面上的输入框赋值" onclick="getParentElement();">
<input type="button" value="获取父页面上的全局变量" onclick="getVarFromParent();">
<input type="button" value="调用父页面上的函数" onclick="parent.parentFunction();">
</body>
</html>
3,子页面2
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
这是子页面2
<input type="text" id="child2Input"/>
</body>
</html>
分享到：
相关推荐
JavaScript实现IFrame子窗口调用父窗口的全局变量
"iframe父页面与子页面通信及相互调用方法"是一个重要的主题，涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面（Parent Page）**：包含`iframe`...
在IT行业中，父子页面之间的通信是一项常见的需求，特别是在构建复杂Web应用时。本文将深入探讨四种主要的方法：`showModelessDialog`、`window.open`、`showModalDialog`以及`iframe`，来实现这样的交互。 首先，...
然而，当涉及到`iframe`中的父子窗口间通信时，开发者可能会遇到一些挑战。本文将详细介绍如何在`iframe`的父窗体与子窗体之间进行数据传递。 ### 1. 同源策略与跨域限制 首先，我们需要了解浏览器的安全机制——...
本篇将深入探讨Java如何利用IFrame（Inline Frame）技术进行Web页面的构建，以及在JSP和J2EE环境下的具体应用。 首先，IFrame是一种HTML标签，用于在网页中嵌入另一个网页或动态内容。在Java Web应用中，IFrame常被...
标题“同级iframe间的函数调用”涉及的是如何在不同`iframe`之间共享数据和交互，这是跨域安全策略下实现页面间通信的一种方式。 在同一个域名下，`iframe`可以相互访问，这是因为它们被视为同一源（same-origin ...
此外，`WebView`还提供了`postMessage`和`onMessage` API，这是一种更现代且推荐的通信方式，它可以在多个窗口或iframe之间安全地传递消息。 通过以上步骤，你就可以在Android应用中实现JavaScript与Java的互调，并...
本示例“iframe跨域互相调用资源”提供了一个解决方案，它着重展示了如何通过`iframe`实现在不同源之间进行通信，并且处理了浏览器兼容性问题，特别是对较老版本的IE浏览器（至少支持到IE8）的支持。 首先，`iframe...
这个实例代码“js-iframe-传值调用”旨在演示如何通过JavaScript在父窗口和iframe之间传递数据，实现页面间的交互。我们将详细探讨这个过程中的关键知识点。 首先，我们要理解iframe的基本结构。一个iframe标签通常...
本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下： 父页面获取子页面元素 格式： $("#iframeID").contents().find("#eleID") 示例代码： father.html <!DOCTYPE html> <...
1. 利用 JS 对 iframe 父子（内外）页面进行操作的方法教程 2. JS 中 iframe 调用父页面的方法 3. iframe 子页面与父页面在同域或不同域下的 js 通信 4. JS 中 iframe 之间传值及子页面与父页面应用 5. javascript ...
使用iframe的时候，可能会涉及到父子窗口之间传值和方法的相互调用，之前一直有些迷糊，也没有着意去弄清楚，这两天要干活，没法子了只好把这都弄明白了。其实非常简单，就那么几个用法，几句代码而已。 子窗口中...
本篇文章将深入探讨如何在`iframe`中调用JavaScript，实现父页面与子页面之间的方法交互。 一、iframe的基本使用 在HTML中，我们可以通过`<iframe>`标签来插入一个框架，例如： ```html <iframe src="child....
总的来说，理解和掌握如何在父窗口与`iframe`子窗口之间进行通信是Web开发中的重要技能，尤其在处理复杂页面结构和跨窗口数据交换时。通过学习和实践这些技术，开发者可以更好地构建交互丰富的Web应用。
**二、`iframe`兄弟页面间的调用示例** 1. **利用`window.parent`和`window.frames`：** ```javascript // 在一个iframe中 var targetIframe = window.parent.window.frames['targetIframeId']; if ...
【标题解析】：“unigui_iframe_amcharts调用”这个标题表明了我们要探讨的是一个与Unigui、iframe和amCharts相关的主题。Unigui是一个基于Delphi的跨平台UI框架，它允许开发者创建Web和移动应用。Iframe是HTML中的...
问题的核心在于，如何在不同层级的iframe之间调用这些函数。 1. 子页面调用父页面的方法： - 如果子页面需要调用其直接父页面中的方法，可以使用parent对象。这是因为parent对象指向的是包含当前iframe的直接父...
本文将详细介绍如何在父页面与子页面（包括通过`iframe`嵌入的页面和通过`window.open`打开的新窗口）之间实现数据共享和方法调用。 #### 1. 使用`iframe`实现父子页面间的通信 **父页面：** 父页面可以通过获取`...
这些操作对于动态加载内容到iframe以及进行父子页面间的交云非常有用。然而，对于跨域的问题，需要通过其他技术手段（如postMessage API）来解决。文章的总结部分提醒我们，虽然这里介绍的技术在同源情况下非常有用...
测试JS之间的调用关系** 在测试JS与IFrame的调用关系时，通常需要考虑以下几点： - **加载顺序**：确保主页面的JS代码在IFrame加载完成后执行，否则可能无法正确获取或操作IFrame内容。 - **异步加载**：若IFrame...