iframe高度自适应的6个方法

文章目录

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。

如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。

iframe内容未知,高度可预测

这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript改变高度。常用的兼容代码有:


// document.domain = "caibaojian.com";
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};

window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};

演示地址

演示一(如果在同个顶级域名下,不同子域名之间互通信息,设置document.domain="caibaojian.com"

只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码,我们一般为了不污染html代码,建议使用上面的代码。

<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

演示二

多个iframe的情况下

<script language="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>

演示三

针对知道的iframe的ID调用

function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}

演示四

内容宽度变化的iframe高度自适应

<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("test");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>

演示五

打开调试运行窗口可以看到运行。

跨域下的iframe自适应高度

跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。

a.html中包含iframe:

<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>

在c.html中加入如下代码:

<iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" style="display:none" ></iframe>
<script type="text/javascript">
(function autoHeight(){
var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
var c_iframe = document.getElementById("c_iframe");
c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 这里通过hash传递b.htm的宽高
})();
</script>

最后,agent.html中放入一段js:

<script type="text/javascript">
var b_iframe = window.parent.parent.document.getElementById("Iframe");
var hash_url = window.location.hash;
if(hash_url.indexOf("#")>=0){
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
}
</script>

agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制)

演示六

原文链接:iframe高度自适应的6个方法 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/iframe-adjust-content-height.html)
评论已关闭。

44 Responses to “iframe高度自适应的6个方法”

  1. Veir123

    看实例

    登录回复
  2. 倚楼听风雨_me

    本地怎么不行呢?谷歌下报错

    登录回复
  3. Joyson_1

    感谢楼主分享!

    登录回复
  4. nanaiwei999

    谢谢分享

    登录回复
  5. 亦花伊晨曦

    很全面,站长辛苦了

    登录回复
  6. 前端开发博客

    很好的内容,支持一个。

    登录回复
  7. IT呆槑

    学习一下

    登录回复
  8. 批判只为发泻而已

    找了很久都不起作用,不知道这个行不行

    登录回复
  9. _六年_

    还不错

    登录回复
  10. liqiang5202760162351_365

    看看,学习一下

    登录回复
  11. shidow

    好期待!

    登录回复
  12. 知不道1008

    学习一下

    登录回复
  13. z种鱼的猫猫z

    学习一下

    登录回复
  14. 回首泪洒

    看看学习一下

    登录回复
  15. 孟祥望_Mxw

     学习一下

    登录回复
  16. 哭晕的鱼

    学习学习

    登录回复
  17. learning65

    学习学习

    登录回复
  18. 用户5228199603

    正在调试,看看行不行哦

    登录回复
  19. 路行风随

    实用、给力,看效果

    登录回复
  20. 迷失奥拓他哥

    看看效果

    登录回复
  21. 荆楚家珞Bravo

    看看效果。。。

    登录回复
  22. 追青boy

    看演示

    登录回复
  23. Joden_Huang

    好像不错

    登录回复
  24. hkjhjk

    看看 好像不行

    登录回复
  25. 幸福的xieguoli

    先看看是不是真的

    登录回复
  26. Debug_Qs

    想看一下演示效果,谢谢。

    登录回复
  27. 欠费的纠结伦

    iframe框架怎样去掉边距?

    登录回复
  28. 咚咚里个锵

    iframe框架怎样去掉边距?

    登录回复
  29. 亿切归零

    看看怎么样的

    登录回复
  30. 花冠与鸟粪

    试一试看看

    登录回复
  31. 梁逸的生活

    试了报错,想看看演示

    登录回复
  32. Gavin_lei

    看演示

    登录回复
  33. 随遇丶而安I

    不错,看看

    登录回复
  34. 钉子的博客

    这么屌

    登录回复
  35. 凤凰平台_凤凰娱乐平台

    真的可以吗?我做的常常错

    登录回复
  36. OurELife

    希望不是个坑!

    登录回复
  37. 冷大侠_David_Hawkes

    这个都需要评论才能看啊。。。

    登录回复
  38. 冉---也

    急需

    登录回复
  39. myhloli

    正好需要这个,回复看看演示

    登录回复
  40. myhloli

    看看演示学习一下

    登录回复
  41. 会飞的鱼和熊掌

    先看演示才知道好不好用

    登录回复
  42. sciooga

    看演示

    登录回复
  43. GJ835

    最近需要用到

    登录回复