Iframe 根据内容自适应高度和宽度

发布于 2019-11-04 10:20:30 字数 4350 浏览 2607 评论 0

Iframe 尤其是不带边框的 Iframe 因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 Iframe 的大小却不像层那样可以伸缩自如，所以带来了使用上的麻烦，给Iframe 设置高度的时候多了也不好，少了更是不行。

JS 获取高度

我们可以编写下面的函数，最后返回Iframe框架的高度。

function SetCwinHeight(){
  var cwin=document.getElementById("cwin");
  if (document.getElementById){
    if (cwin && !window.opera){
      if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
        cwin.height = cwin.contentDocument.body.offsetHeight;
      else if(cwin.Document && cwin.Document.body.scrollHeight)
        cwin.height = cwin.Document.body.scrollHeight;
    }
  }
}

最后加入 Iframe 不能丢掉 onload 属性，当然了 ID 也必须也函数中的 Cwin 匹配

<iframe width="778" align="center" height="200" id="cwin" name="cwin" onload="Javascript:SetCwinHeight()" frameborder="0" scrolling="no"></iframe>

计算卷去的高度

假设我们的子页面也就是被引入框架的页面有如下的代码，假设这个页面的名称为temp.html

<body onLoad="parent.setSize(getSize())">
<table width="100" height="660" bgcolor="#FFCC66">
  <tr>
  <td></td>
  </tr>
</table>
<div id="PageEnd" style="position:relative"></div>
<script>
function getSize(){
  return document.getElementById("PageEnd").offsetTop
}
</script>
</body>

而我们的主页面可以这样编写

<script language="JavaScript" type="text/JavaScript">
function setSize(theHeight){
  document.all.ifrm.height=theHeight+12;
}
</script>
<iframe id="ifrm" width="100%" height="0px" scrolling="no" src="temp.htm"></iframe>

自适应高度

假设页面中包含iframe的部分代码如下：

<iframe id="test" name="test" frameborder=0 scrolling=no src="http://blog.sina.com.cn/u/1463420203" width="100%" height=0></iframe>

方法一

在页面中加入

<script for=window event=onload language="jscript">
  document.all("test").height=test.document.body.scrollheight;
</script>

自适应宽度类似在Script中加入

document.all("test").width=test.document.body.scrollwidth;

方法二

建立一个bottom.js的文件，然后输入下面的代码（只有两行哦）

parent.document.all("框架ID名").style.height=document.body.scrollHeight;
parent.document.all("框架ID名").style.width=document.body.scrollWidth;

这里的框架ID名就是Iframe的ID，比如：

<iframe id="框架ID名" name="left" frameBorder=0 scrolling=no src="demo.asp" width="100%"></iframe>

给你网站里所有的被包含文件里面每个都加入

<script language = "JavaScript" src = "bottom.js"/></script>

Iframe自适应高度

输入你希望根据页面高度自动调整高度的iframe的名称的列表，用逗号把每个iframe的ID分隔，例如: ["myframe1", "myframe2"]，可以只有一个窗体则不用逗号。

//定义iframe的ID
var iframeids=["content"]

//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
var iframehide="yes"

function dyniframesize(){
  var dyniframe=new Array()
  for (i=0; i<iframeids.length; i++){
    if (document.getElementByIdx_x){
      //自动调整iframe高度
      dyniframe[dyniframe.length] = document.getElementByIdx_x(iframeids[i]);
      if (dyniframe[i] && !window.opera){
        dyniframe[i].style.display="block"
        if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
          dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
        else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
          dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
      }
    }
    //根据设定的参数来处理不支持iframe的浏览器的显示问题
    if ((document.all || document.getElementByIdx_x) && iframehide=="no"){
      var tempobj=document.all? document.all[iframeids[i]] : document.getElementByIdx_x(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

分享到QQ

分享到微博