`

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

    博客分类：
  • js
 
阅读更多

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> 

分享到：
| Javascript:为input设置readOnly属性
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics