欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【如何实现iframe自适应高度】，下面是详细的分享！
如何实现iframe自适应高度
好几次看到有人提问问到如何实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象，刚好我在工作中也碰到了类似问题，于是上网翻查，东抄抄西看看，弄出来这么一个函数，贴到页面里面就能用了。不敢独享，大家要是觉得有用，欢迎使用源代码如下<code>
<script type="text/javascript">
//
//输入你希望根据页面高度自动调整高度的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[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.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>
</code>
使用的时候只要贴在<head></head>里面就可以了
iframe嵌入网页的用法?作者：自由勇?点击：MT-8000?最后更新 2003-10-12
iframe并不是很常用的，在标准的网页中非常少用。但是有朋友经常问到，下面我简单地介绍一下它的用法，你只要熟练掌握这些参数足矣。
<iframe>也应该是框架的一种形式，它与<frame>不同的是，iframe可以嵌在网页中的任意部分。我们举第一个例子，具体代码如：
<iframe width=420 height=330 frameborder=0 scrolling=auto src=http://www.admin5.com/article/20081202/URL></iframe>，这里的URL可以是相对路径，也可以是绝对路径，效果如：
width表示宽度，height表示宽度，可根据实际情况调整。
scrolling表示是否显示页面滚动条，可选的参数为auto、yes、no，如果省略这个参数，则默认为auto。
二、如何实现页面上的超链接指向这个嵌入的网页？
只要给这个iframe命名就可以了。方法是<iframe name=**>，例如我命名为aa，写入这句HTML语言<iframe width=420 height=330 name=aa frameborder=0 src=http://www.liuyebo.com></iframe>，然后，网页上的超链接语句应该写为：<a href=http://www.admin5.com/article/20081202/URL target=aa>
三、如果把frameborder设为1，效果就像文本框一样。
以上所分享的是关于如何实现iframe自适应高度，下面是编辑为你推荐的有价值的用户互动：
相关问题：如何设置Iframe自适应高度
答：function resizeCrossDomainIframe(id, other_domain) { var iframe = document.getElementById(id); window.addEventListener('message', function(event) { if (event.origin !== other_domain) return; // only accept messages from the sp >>详细
相关问题：如何让IFrame自适应高度
答：方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。 方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。 在代码维护角度考虑，方法二是优于方法一... >>详细
相关问题：如何让iframe自适应高度
答：什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，... >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-