完美iframe高度自适应代码N种方法

时间:2015/12/1 11:19:00来源:互联网 作者:flyso 点击: 1054 次

无JS一:
1。去除对DOCTYPE声明的依赖,有无或不同声明皆有相同效果

2。代码简洁,直接在Iframe的onload标签中添加代码,无需对被调用页面添加代码

注:Iframe页面和被嵌入页面必须是相同域下面的页面,否则由于浏览器安全限制会出现javascript错误,提示没有权限!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html>
< head>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< meta http-equiv="Content-Language" content="zh-cn">
< title>www.flyso.cn--完美Iframe高度自适应代码</title>
< style type="text/css">
< !--
body {
    background:url(http://voice.qq.com/love/images/page_bg.gif);
    font-family: "Verdana";
    font-size: 12px;
    margin: 0;
}
.fontred {color: #F00}
-->
< /style>
< /head>

< body>
< table width="750" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#00CCFF">
  <tr>
    <td height="200" align="center" valign="middle"><br><strong>页面内容区域</strong><br />
        <br />
        <span class="fontred"><strong>注:</strong>onload字段中的数值“200”为设置的Iframe最低高度值!</span><br />
      <br />
      <a href="myfile/sample/shortpage.htm" target="content">Iframe显示短页面</a>  <a

href="myfile/sample/longpage.htm" target="content">Iframe显示长页面</a></td>
  </tr>
< /table>
< table width="750" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#00CCFF">
  <tr>
    <td align="center" valign="top"><iframe src="myfile/sample/shortpage.htm" name="content" id="content"

allowtransparency="true" align="default" marginwidth=0 marginheight=0 frameborder=0 scrolling=no height="200" width="500"

onload="this.height=0;var fdh=(this.Document?

this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>200?fdh:200)//code by FLYSO

Blog">This message is only visible to older browsers.</iframe></td>
  </tr>
< /table>
< table width="750" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#00CCFF">
  <tr>
    <td align="center"></td>
  </tr>
< /table>

< /body>
< /html>

无JS二:

<iframe name="pindex" src="flyso.asp"  scrolling="no" width="98%" height="100%" frameborder="no"  onload="document.all

['pindex'].style.height=pindex.document.body.scrollHeight" ></iframe> 


有JS一:
解决iframe框架页面自适应高度问题代码如下,需要注意的是框架引用页面一定要设置name属性,否则会不生效

注意:iframe页面动态内容如果用div方式实现,自适应高度不稳定,改成table方式实现,解决问题

<iframe src="test.asp" width="100%" frameborder="0" scrolling="no" name="hj" id="hj"></iframe>

test.asp页面head间增加如下JS代码

<SCRIPT LANGUAGE="JavaScript">

function f_frameStyleResize(targObj){

var targWin = targObj.parent.document.all[targObj.name];

if(targWin != null) {

  var HeightValue = targObj.document.body.scrollHeight

  if(HeightValue < 600){HeightValue = 600}

  targWin.style.pixelHeight = HeightValue;

}

}

function f_iframeResize(){

bLoadComplete = true; f_frameStyleResize(self);

}

var bLoadComplete = false;

window.onload = f_iframeResize;

</SCRIPT> 


有JS二:

<script type="text/javascript">
var iframeids=["myblog"]
var iframehide="yes"
function dyniframesize()
{
  var dyniframe=new Array()
  for (i=0; i<iframeids.length; i++)
  {
   if (document.getElementById)
   {
    dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
    if (dyniframe[i] && !window.opera)
    {
     dyniframe[i].style.display="block"
     if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight)
      dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
     else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight)
      dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
    }
   }
   if ((document.all || document.getElementById) && iframehide=="no")
   {
    var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
    tempobj.style.display="block"
   }
  }
}

if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize

</script>


Copyright © 2005 - 2016 flyso.cn. 飞搜 版权所有 鄂ICP备11002783号-3