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

来源：懂视网责编：小采时间：2020-11-27 15:16:42

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

HTML教程：如何设置Iframe自适应高度: 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以伸缩自如，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大家一种ifr

推荐度：

点击下载本文 文档为doc格式

导读HTML教程：如何设置Iframe自适应高度: 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以伸缩自如，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大家一种ifr

不带边框的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的浏览器的显示问题

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)