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

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>

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

猜你喜欢