HTML教程：如何设置Iframe自适应高度

╰+哭是因爲堅強的太久メ 2022-08-07 14:56 66阅读 0赞

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家一种iframe动态调整高度的方法，主要是以下JS函数：   
  
一、程序代码

function SetWinHeight(obj)

var win=obj;

if (document.getElementById)

if (win && !window.opera)

if (win.contentDocument && win.contentDocument.body.offsetHeight)

win.height = win.contentDocument.body.offsetHeight;

else if(win.Document && win.Document.body.scrollHeight)

win.height = win.Document.body.scrollHeight;

\}  
  
最后，加入iframe,不能丢掉onload属性，当然了，id也必须也函数中的win匹配；  
  
二、程序代码：  
  
我们看看另一种情况的iframe解决方案  
重要提示：src=中你必须填写的网页地址，一定要和本页面在同一个站点上，否则，会抱错，说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)现在给大家分享一下：  
  
1、建立一个bottom.js的文件，然后输入下面的代码；  
parent.document.all("框架ID名").style.height=document.body.scrollHeight;  
parent.document.all("框架ID名").style.width=document.body.scrollWidth；  
  
2、给你网站里所有的被包含文件里面每个都加入，在WINXP、IE6下面测试通过；  
  
实现 iframe 的自适应高度  
    实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象；  
  
程序代码

//\*\* iframe自动适应页面 \*\*//

//输入你希望根据页面高度自动调整高度的iframe的名称的列表

//用逗号把每个iframe的ID分隔. 例如: \["myframe1", "myframe2"\]，可以只有一个窗体，则不用逗号。

//定义iframe的ID

var iframeids=\["test"\]

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

var iframehide="yes"

function dyniframesize()

var dyniframe=new Array()

for (i=0; i<iframeids.length; i++)

if (document.getElementById)

//自动调整iframe高度

dyniframe\[dyniframe.length\] = document.getElementById(iframeids);

if (dyniframe && !window.opera)

dyniframe.style.display="block"

if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape  
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;

else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE

dyniframe.height = dyniframe.Document.body.scrollHeight;

//根据设定的参数来处理不支持iframe的浏览器的显示问题

if ((document.all || document.getElementById) && iframehide=="no")

var tempobj=document.all? document.all\[iframeids\] : document.getElementById(iframeids)

tempobj.style.display="block"

if (window.addEventListener)

window.addEventListener("load", dyniframesize, false)

else if (window.attachEvent)

window.attachEvent("onload", dyniframesize)

else

window.οnlοad=dyniframesize