1、iframe子页面调用父页面js函数
子页面调用父页面函数只需要window.praent就可以了。比如调用a()函数，就写成：
window.praent.a();或praent.a();
在chrome 5+中，window.parent无法在file://协议中运行，放到Web容器中测试就正常了，http协议正常。此方法支持ie、firefox浏览器。
2、iframe父页面调用子页面js函数
下面的方法支持ie和firefox浏览器,
document.getElementById('ifrId').contentWindow.b();
ifrId是iframe框架的id，b()为子页面js函数。contentWindow属性是指定的frame或者iframe所在的window对象，IE下可以省略。
3、
<html >
<head>
<title>父页面</title>
</head>
<script language=javascript>
function aa()
{
alert(document.frames["tt"].document.body.innerHTML);
}
function bb()
{
alert(tt.document.getElementById("Text1").value); //调用子页面的元素
}
function cc()
{
tt.test(); //调用子页面的函数
}
</script>
<body>
<iframe name=tt id=tt src=child.htm style="width: 372px"></iframe>
<input id="Text1" value="parent" type="text" />
<input id="Button1" onclick="aa()" type="button" value="button" />
<input id="Button2" onclick="bb()" type="button" value="button" />
<input id="Button3" onclick="cc()" type="button" value="button" />
</body>
</html>
http://www.cnblogs.com/simhare/archive/2008/07/16/1244334.html
--------------------------------------------------------------
子页面
<html >
<head>
<title>子页面</title>
</head>
<script language=javascript>
function test()
{
alert("test");
}
function aa()
{
parent.aa(); //调用父页面的函数
alert(parent.document.getElementById("Text1").value); //调用父页面的元素
}
</script>
<body>
<input id="Text1" value="child" type="text" />
<input id="Button1" onclick="aa()" type="button" value="button" />
</body>
</html>
4、
如果父页面和子页面不在一个域名下，就长生了跨域的问题，这是要将两个页面的domain设置成一样的,例如：document.domain ="website.com";
5、
iframe 高度自动调节，最简单解决
目标：母版页+菜单+iFrame的完美解决
--------------------
| 母版 title |
--------------------
| |
|index | iframe
|menu | 内容页
| |
-------------------
| 母版 footer |
-------------------
点击左面菜单/tree，通过设置tree的navi-url，在右面的iframe动态加载内容页面。
iframe 要按内容页面 自动适应 自动调节高度 。
母版，菜单 比较好解决。重点说下iFrame高度自动调节。
<iframe id="content" name="content" scrolling="no" frameborder="0" width="754px" height="50px" onload = "height = this.Document.body.scrollHeight + 30;" > </iframe>
注意事项：
a、height设为auto不行的，一定要有一个值
b、this.document引用到是的 iframe所在页面对象，
this.Document (大写D)，才能引用到iframe内含对象
这个方法可能更稳妥
onload = "height = document.frames(this.name).document.body.scrollHeight + 30"--IE6下不行，报错。
6、//<!--一定要在iframe页面上引用,在FIREFOX下也是可以的-->
<script type="text/javascript">
function iframeAutoFit(){
var ex;
try{
if(window!=parent){
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length;i++) {
if(a[i].contentWindow==window){
var h1=0, h2=0;
if(document.documentElement && document.documentElement.scrollHeight){
h1=document.documentElement.scrollHeight;
}
if(document.body)
h2=document.body.scrollHeight;
var h=Math.max(h1, h2);
if(document.all)
h += 4;
if(window.opera)
h += 1;
a[i].style.height = h +"px";
}
}
}
} catch (ex){}
}
if(document.attachEvent){
window.attachEvent("onload", iframeAutoFit);
window.attachEvent("onresize", iframeAutoFit);
}else{
window.addEventListener('load', iframeAutoFit, false);
window.addEventListener('resize', iframeAutoFit, false);
}
</script>
7、
fram高度自适应，两种方法：
方法一：父页面获取子页面高度，改变父页面高度
以下代码加到父页面：
<script language="javascript">
//获取iframe子页面的方法，需调用才能实现 (<body onload="doShow()">)
function doShow(){
//获得子页面的高度 document.getElementById("content").contentWindow.document.body.scrollHeight
document.getElementById("content").style.height = document.getElementById("content").contentWindow.document.body.scrollHeight + "px";
//改变iframe的高度
}
</script>
方法二：子页面直接改变父页面高度
以下代码加到子页面：
<script language="javascript">
//控制父页面iframe高度的方法
parent.document.getElementById("content").style.height = document.body.scrollHeight +"px";
</script>
分享到：
相关推荐
父页面和`iframe`页面可以通过`window.parent`和`window.frames`对象互相访问，实现通信。`iframe`的优势在于它可以加载跨域的内容，但缺点是处理复杂交互可能变得困难，且可能导致性能问题。 在实际开发中，考虑到...
"iframe父页面与子页面通信及相互调用方法"是一个重要的主题，涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面（Parent Page）**：包含`iframe`...
1. 利用 JS 对 iframe 父子（内外）页面进行操作的方法教程 2. JS 中 iframe 调用父页面的方法 3. iframe 子页面与父页面在同域或不同域下的 js 通信 4. JS 中 iframe 之间传值及子页面与父页面应用 5. javascript ...
本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下： 父页面获取子页面元素 格式： $("#iframeID").contents().find("#eleID") 示例代码： father.html <!DOCTYPE html> <...
### (JS)父子页面相互调用总结 在前端开发中，常常会遇到需要在不同的页面之间进行数据交换或状态同步的情况。特别是在涉及到`iframe`或`window.open`打开的新窗口时，这种需求更为常见。本文将详细介绍如何在父...
JavaScript实现IFrame子窗口调用父窗口的全局变量
这些操作对于动态加载内容到iframe以及进行父子页面间的交云非常有用。然而，对于跨域的问题，需要通过其他技术手段（如postMessage API）来解决。文章的总结部分提醒我们，虽然这里介绍的技术在同源情况下非常有用...
子页面则可以调用`window.parent.postMessage`向父页面发送数据。 4. 使用框架（如`iframe`）：如果子页面是嵌入在父页面中的，可以通过`iframe`的API进行通信。例如，父页面可以访问`iframe.contentWindow`对象与...
在子页面中，调用`window.parent.postMessage(data, targetOrigin)`，在父页面中，注册`window.addEventListener('message', function(event) { ... })`事件处理器。 3. **使用`localStorage`或`sessionStorage`**...
在处理`iframe`时，经常需要进行父子页面间的交互，例如从`iframe`调用父页面的函数或传递数据。下面我们将详细介绍`js`中`iframe`调用父页面方法的相关知识点。 1. **基本调用方式** 在`iframe`中的页面，可以...
在父子页面的交互中，父页面可以控制子页面，子页面也可以与父页面进行通信。这样的结构在复杂的Web应用中十分常见，特别是在需要模块化和组件化的场景中。 知识点三：父子页面事件的相互调用 在实际的Web应用开发...
**iframe的父子、子与子之间的交互** 在Web开发中，有时我们需要在iframe中嵌入的页面与主页面，或者两个嵌套的iframe之间进行数据交换和功能交互。这可以通过JavaScript来实现，主要涉及以下几个方面： 1. **父...
在父子页面关系中，IFrame中的页面（子页面）与包含它的页面（父页面）可以进行一定程度的交互。 描述“子页面刷新父页面”指出我们要解决的是从子页面出发，如何刷新包含它的父页面。这通常通过JavaScript来实现，...
使用iframe的时候，可能会涉及到父子窗口之间传值和方法的相互调用，之前一直有些迷糊，也没有着意去弄清楚，这两天要干活，没法子了只好把这都弄明白了。其实非常简单，就那么几个用法，几句代码而已。 子窗口中...
在Web开发中，有时我们需要在父页面与嵌入的iframe子页面之间进行交互，例如获取子页面中的某些参数或控制子页面的行为。以下将详细介绍如何在父页面中获取子页面参数的方法。 首先，你需要在父页面上创建一个`...
在实际应用中，特别是在涉及到多页面交互的场景下，layer经常以iframe的方式弹出子页面。这篇文章主要分析了如何在layer弹出的iframe子页面中与父页面进行交互。 首先，我们可以通过`parent`关键字来访问父页面的...
关于JavaScript操作iframe父子窗体的知识点，本篇内容主要涉及通过JavaScript代码实现父窗口与iframe子窗口间数据的互相访问，以及如何控制子窗口中的内容。以下是详细的内容说明： 1. 父窗口与iframe的交互： 在父...
而在实际项目开发过程中，经常会利用iframe在一个父页面中嵌入另外一个子页面，或者在一个父页面中弹出另一个页面，由于同源策略的限制，父子页面之间的脚本无法实现通信，而使用postMessage方法就实现了父子页面...