在iframe中调用父页面和子页面js方法：
今天朋友问我：a页面用iframe引入b页面，而此时要在a页面怎么调用iframe所引入b页面里的方法，很熟悉，但就是忘记了，后来百度下，才晓得，主要通过window.frames["name属性"].方法名（），也就是iframe中的name属性，b页面调用a页面中的方法略过看代码吧
index.html
<html>
<head>
<script type="text/javascript">
function ff(){
alert(">>this is index's js function");
}
</script>
</head>
<body>
<div style="background: lightblue;">
<input type="button" value="index" onclick="ff();" />
<input type="button" value="inner" onclick='window.frames["childPage"].ff();' />
</div>
<iframe id="" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe>
</body>
</html>
inner.html
<html>
<head>
<script type="text/javascript">
function ff(){
alert(">>sdfdsdfdsfdsfsdfthis is inner page's js function");
}
</script>
</head>
<body>
<div>
<input type="button" value="index" onclick='parent.window.ff();' />
<input type="button" value="inner" onclick="ff();" />
</div>
</body>
</html>
子页面调用父页面的JS方法：window.parent.方法名();
下面就给出一个子孙三代的调用大家可以参考：
爷爷页面：
<!DOCTYPE html>
<html>
<head>
<title>frameDemo.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<script type="text/javascript">
function father(){
alert("father");
}
</script>
<body>
我是iframe主文件<p/>
<button onclick='window.frames["c1"].children();'>父调子</button>
<button onclick='window.frames["c1"].frames["c11"].sunzi();'>父调孙</button>
<div>
<iframe src="iframe/1.html" name="c1"></iframe>
</div>
</body>
</html>
父亲页面：
<!DOCTYPE html>
<html>
<head>
<title>1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function children(){
alert("children");
}
</script>
</head>
<body>
dsddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<p/>
<button onclick="window.parent.father();">子调父</button>
<button onclick='window.frames["c11"].sunzi();'>子调孙</button>
<iframe src="2.html" name="c11"></iframe>
</body>
</html>
孙子页面：
<!DOCTYPE html>
<html>
<head>
<title>2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function sunzi(){
alert("孙子");
}
</script>
</head>
<body>
iframe2222222222222222<p/>
<button onclick="window.parent.children();">孙调父</button>
<button onclick="window.top.father();">孙调爷</button><!-- 两种方式都可以 -->
<button onclick="window.parent.parent.father();">孙调爷</button>
</body>
</html>
调用兄弟节点的方法：<button onclick='window.parent.frames["c1"].children();'>调用兄弟节点的方法</button>
其实原理是找到父页面再找兄弟页面，再找兄弟的方法。
切记：在iframe下JS方法之间和html元素之间，JS成员变量之间是相互不影响的，它和动态包含和静态包含不同。这一点要切记，iframe只是在页面形式上看上去有着包含的关系。其实如果在父页面要调用子页面的方法和元素必须用window对象。
获取元素的值：
var t=$('div',window.frames["c1"].document);//父页面取儿子页面上的属性
var m=$('div',window.frames["c1"].frames["c11"].document);//父页面取孙子页面上的属性
alert($('div',window.parent.document).text());//孙子取父页面的属性
alert($('div',window.parent.parent.document).text());//孙子取爷爷页面的属性
alert($('div',window.top.document).text());//孙子取爷爷页面的属性，爷爷是最顶级的页面
alert("兄弟节点："+$('div',window.parent.frames["c1"].document).text());//兄弟页面取出兄弟节点的属性
相关推荐
"iframe父页面与子页面通信及相互调用方法"是一个重要的主题，涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面（Parent Page）**：包含`iframe`...
这些方法可以在实际项目中应用，例如在父页面中调用 iframe 子页面的 js 函数来实现某些操作，或者在 iframe 子页面中调用父页面的 js 函数来实现某些操作。 相关知识点 1. iframe 子父页面调用 js 函数的示例 2. ...
假设在父页面上有一个名为`updateParentData`的函数，可以在子页面中这样调用： ```javascript parent.updateParentData('子页面传递的数据'); ``` 接着，我们讨论“子页面给父页面赋值”。当子页面完成了某些操作...
不过，当iframe和父页面属于同一域时，可以通过JavaScript或jQuery来操作父页面中的元素和方法。本文将详细介绍如何使用jQuery来查找和操作iframe父页面中的元素和方法。 首先，需要明确iframe元素可以被视为一个...
JavaScript实现IFrame子窗口调用父窗口的全局变量
在Web开发中，"父窗口调用iframe子窗口方法"是一个常见的交互场景，尤其是在构建复杂的单页面应用或者需要跨窗口通信时。这篇文章将详细讲解如何实现这个功能，并提供相关的源码示例。 首先，理解基本概念。`iframe...
本文实例讲述了js中iframe调用父页面的方法。分享给大家供大家参考。具体实现方法如下： 子页面调用父页面的方法在js中很容易实现。我们只需要在主页面加个函数，然后在子页面通过window.parent.方法()即可实现了 ...
本文将通过一个具体的示例介绍如何实现iframe中的父页面与子页面之间的互相调用，以及子页面中再嵌套iframe时的相关操作。 #### 1. 基本概念 首先我们需要了解几个基本的概念： - **父页面（Parent Frame）**：指...
标题“demo_DEMO_子页面刷新父页面iframe_”暗示我们关注的焦点是关于如何在子页面中触发父页面的刷新操作，特别是在一个IFrame上下文中。下面将详细探讨这个主题。 首先，我们需要了解IFrame（内联框架）的基本...
在`iframe`子页面中，要调用父页面的JavaScript函数，可以使用`window.parent`对象来引用父窗口。假设父页面有一个名为`a()`的函数，子页面可以这样调用它： ```javascript window.parent.a(); ``` 如果需要获取父...
在实际应用中，jquery和js调用iframe父窗口与子窗口元素的方法有很多实例应用。例如，在一个购物网站中， iframe可以用来显示购物车的内容，而父窗口可以用来显示整个网站的导航栏。在这种情况下，需要从iframe中...
在`iframe`中的页面，可以通过`window.parent`属性来访问父页面的全局对象，从而调用父页面中定义的函数。例如，如果父页面有一个名为`a`的函数，`iframe`中的代码可以这样调用它： ```javascript window.parent...
在标题和描述中提到的"frameset父页面和子页面的方法之间调用个属性的调用"，涉及到的是跨框架通信的概念。当一个`frameset`中有多个`frame`或`iframe`时，它们之间可能需要进行数据交换或操作交互。这种交互可以...
在实际应用中，根据项目需求和浏览器兼容性，可以选择合适的方法实现iframe跨域调用父窗口的JavaScript方法。同时，注意安全问题，避免恶意代码通过跨域通信窃取敏感信息。 以上就是关于iframe跨域调用父页面js方法...
而在父页面中，由于`iframe`内容被封装在一个单独的窗口对象中，我们需要先获取到`iframe`的`contentWindow`或`contentDocument`属性，然后才能访问`iframe`中的内容。例如，获取`iframe`内一个名为`iframeFunction`...
在网页开发中，有时我们需要在一个页面中嵌入另一个页面，这就是`iframe`元素的作用。`iframe`可以让网页在不离开当前页面的情况下加载其他HTML文档，从而实现内容的分块显示或者部分更新。在这个场景下，涉及到的一...
6. **易于使用**：由于描述中提到，所有代码都在子页面内部，这意味着用户只需要在子页面中引入必要的JavaScript和CSS，然后调用相关的函数即可，无需修改父页面的代码，提高了代码的可维护性和复用性。 在提供的`...
在Web开发中，子页面和父页面的交互是常见...在`parent.html`和`childPage.html`中，你可以结合这些技术实现子页面调用父页面的方法，或者父页面向子页面传递数据。记得在实际应用中考虑到安全性、性能和兼容性等问题。