iframe父子页面互相调用、控制

最新推荐文章于 2022-01-28 14:48:35 发布

LIXG425

最新推荐文章于 2022-01-28 14:48:35 发布

阅读量140

点赞数

文章标签：框架

本文详细介绍了如何在iframe页面中实现与父页面的函数调用、元素访问及高度自适应功能，覆盖了不同浏览器的支持情况，并提供了解决跨域问题的方法。

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、//
<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>