您的位置：360文档中心› html iframe 高度自适应 简书

html iframe 高度自适应 简书

合集下载

iframe标签用法详解（属性、透明、自适应高度）

iframe标签用法详解（属性、透明、自适应高度）

iframe标签⽤法详解（属性、透明、⾃适应⾼度）1、iframe 定义和⽤法iframe 元素会创建包含另外⼀个⽂档的内联框架（即⾏内框架）。

HTML 与 XHTML 之间的差异在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不⽀持 iframe 元素。

提⽰和注释：提⽰：您可以把需要的⽂本放置在 <iframe> 和 </iframe> 之间，这样就可以应对⽆法理解 iframe 的浏览器。

iframe标签是成对出现的,以<iframe>开始,</iframe>结束iframe标签内的内容可以做为浏览器不⽀持iframe标签时显⽰属性属性值描述DTDalign leftrighttopmiddlebottom不赞成使⽤。

请使⽤样式代替。

规定如何根据周围的元素来对齐此框架。

TFframeborder 10规定是否显⽰框架周围的边框。

TFheight pixels%规定 iframe 的⾼度。

TFlongdesc URL规定⼀个页⾯，该页⾯包含了有关 iframe 的较长描述。

TF marginheight pixels定义 iframe 的顶部和底部的边距。

TF marginwidth pixels定义 iframe 的左侧和右侧的边距。

TF name frame_name规定 iframe 的名称。

TFscrolling yesnoauto规定是否在 iframe 中显⽰滚动条。

TFsrc URL规定在 iframe 中显⽰的⽂档的 URL。

TFwidth pixels%定义 iframe 的宽度。

TF⽰例复制代码代码如下:<iframe src="https://" width="200" height="500">使⽤了框架技术，但是您的浏览器不⽀持框架，请升级您的浏览器以便正常访问。

iframe高度自适应

iframe高度自适应

iframe高度自适应发表于 2012/04/05 由 henrypoter/nocategory/iframe-auto-height.html怎样使得iframe自适应嵌套的页面的高度？在嵌入的页面的onload事件中调用如下代码：parent.document.all().height=document.body.scrollHeight;禁止网页缓存,设置expires=0.在主页及嵌入页中加入如下内容：<META HTTP-EQUIV="pragma" CONTENT="no-cache"><META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"><META HTTP-EQUIV="expires" CONTENT="0">主页面内容：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!-- saved from url=(0014)about:internet --><html><head><title>ifame自动高度</title><META HTTP-EQUIV="pragma" CONTENT="no-cache"><META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"><META HTTP-EQUIV="expires" CONTENT="0"><meta http-equiv="Content-Type" content="text/html;"></head><body bgcolor="#ffffff" leftmargin="0" topmargin="0" ><table id="tab1" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td></td><td></td><td></td><tr><td></td><td><iframe name="ifm" src="embed.htm" width="100%" frameborder="0" marginheight="0" marginwidth="0" hspace="0" vspace="0"></iframe></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></body></html>嵌入页面embed.htm内容：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!-- saved from url=(0014)about:internet --><HTML><HEAD><META http-equiv=Content-Type content="text/html; charset=gb2312"><META http-equiv=Expires content=0><META http-equiv=Cache-Control content=no-cache><META http-equiv=Pragma content=no-cache><script language="javascript">function setparentheight(){parent.document.all().height=document.body.scrollHeight;}</script><BODY onload="setparentheight();"><TABLE name="tab1" class=center cellSpacing=0 cellPadding=0 width="100%"><tr><td></td><td>1</td><td></td></tr><tr><td></td><td>2</td><td></td></tr><tr><td></td><td>3</td><td></td></tr><tr><td></td><td>4</td><td></td></tr><tr><td></td><td>5</td><td></td></tr><tr><td></td><td>6</td><td></td></tr><tr><td></td><td>7</td><td></td></tr><tr><td></td><td>8</td><td></td></tr><tr><td></td><td>9</td><td></td></tr></TABLE></BODY></HTML>此条目发表在其他文章分类目录，贴了 html, iframe高度自适应标签。

Iframe框架高度自适应的实现

Iframe框架高度自适应的实现

（一）I frame框架高度自适应的实现Iframe框架高度自适应的实现,一个很牛的团队写的，简单的说就是在A.html 中iframe引用B.htm(高度是不断变化的)并且自适应高度.网上也有很多方法，但是有些不全兼容ie6,ie7,ff,opera,在此贴下兼容ie6,ie7,ff,opera下的高度自适应的代码,并且已经封装好，只需要在被引用的页面加入这段代码<script type=”text/javascript” src=”iframeAutoFit.js”mce_src=”iframeAutoFit.js”></script>function iframeAutoFit()1.{2.try3.{4.if(window!=parent)5.{6.var a = parent.document.getElementsByTagName("IFRAME");7.//返回一个有特定标签名称（iframe）的子元素列表，是数组对象。

8.for(var i=0; i&lt;a.length; i++)9.{10.if(a[i].contentWindow==window)//contentWindow属性是指指定的frame或者iframe所在的window对象11.{12.13.var h1=0, h2=0, d=document, dd=d.documentElement;14.a[i].parentNode.style.height = a[i].offsetHeight +"px";15.//parentNode 属性:传回目前节点的父节点.16.//offserHeaight 属性:表示课件高度17.a[i].style.height = "10px";18.19.if(dd &amp;&amp; dd.scrollHeight)h1=dd.scrollHeight;//scrollHeight属性:网页正文全文高20.if(d.body) h2=d.body.scrollHeight;21.var h=Math.max(h1, h2);//取得最大值22.23.if(document.all){h += 0;}24.if(window.opera){h += 1;}//修正在opera浏览器25.a[i].style.height = a[i].parentNode.style.height = h +"px";26.}27.}28.}29.}30.catch (ex){}31.}32.if(window.attachEvent)33.{34.window.attachEvent("onload", iframeAutoFit);35.//页面加载完后执行LoadImg函数36.}37.else if(window.addEventListener)//兼容ff38.{39.window.addEventListener('load', iframeAutoFit, false);40.}如何实现iframe(嵌入式帧)框架的自适应高度好几次看到有人提问问到如何实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象，刚好我在工作中也碰到了类似问题，于是上网翻查，东抄抄西看看，弄出来这么一个函数，贴到页面里面就能用了。

iframe自适应高度(简单好用)

iframe自适应高度(简单好用)
iframe 自适应高度（简单好用）2010年12月23日 星期四 下午 08:02
function SetWinHeight(obj){
var win=obj;
if (document.getElementById){
if (win && !window.opera){
if (win.contentDocument && win.contentDocument.body.offsetHeight)
//测试时出现问题：ie中，style的高度没改，属性改了，框架高度没变，用下面的方法改动样式的高度，问题解决了。
//parent.document.getElementById("window3").height='450px';
}
}
}
}
}
}
<iframe src="center.jsp" allowtransparency="true" name="right" width="100%" height="500" scrolling="no" frameborder="0" id="window3" border="0" oresize="noresize" framespacing="0" onload="Javascript:SetWinHeight(this)"></iframe>
function openUrl(url){

iframe高度自适应的6个方法

iframe高度自适应的6个方法

iframe高度自适应的6个方法总所周知，IFrame的高度很容易被改变，以便满足其所需的文档大小。

在默认情况下，某些浏览器会在IFrame中自动设置高度，以适应内容的大小。

但是，一旦IFrame的内容发生变化，它的高度还是不会随着变化。

为了解决这个问题，我们可以使用以下6种不同的方法来让IFrame自动调整自身的高度：（1）使用CSSCSS是最简单有效的方法，可以用来让IFrame高度自动调整。

我们可以使用CSS的“height: auto !important”属性，只需给IFrame 添加一个包含此CSS规则的样式，就可以让IFrame在文档大小发生变化时随之调整自身的高度。

（2）使用JavaScript与CSS不同，JavaScript可以精确地获取iframe的内容，并将其高度设置为文档的高度。

只需使用JavaScript的offsetHeight属性，就可以计算出文档的高度，并将其设置为IFrame的高度。

（3）使用jQueryjQuery也是一种强大的JavaScript库，可以用来设置IFrame 的自动高度。

只需使用jQuery的resize()方法，然后使用height()和width()方法获取文档的高度和宽度，再将其分别设置为IFrame 的高度和宽度，就可以轻松地使IFrame自动调整自身的高度。

（4）使用AngularJSAngularJS是一种前端开发框架，可以用来让IFrame的高度自动调整。

在AngularJS中，我们可以使用ng-style指令来定义IFrame 的高度，并使用“height: auto !important”属性，以便在文档大小发生变化时自动调整IFrame的高度。

（5）使用ReactReact也是一种前端开发框架，可以用来让IFrame的高度自动调整。

只需使用React的onResize()方法，获取IFrame实例，然后使用getBoundingClientRect()方法获取其当前的高度，再将其设置为IFrame的高度，就可以让IFrame自动调整自身的高度。

iframe高度自适应及隐藏滚动条的实例详解

iframe高度自适应及隐藏滚动条的实例详解

iframe⾼度⾃适应及隐藏滚动条的实例详解iframe⾼度⾃适应及隐藏滚动条的实例详解在⼯作中，我们可能会遇到⾃⼰公司和其他的公司达成合作关系，从⽽共同开发某个项⽬。

⽽这时候，我们可能就需要在⾃⼰的⽹站上嵌⼊别⼈做好的页⾯。

⽽这种情况下，我们⼀般都会选择去使⽤iframe达到我们的⽬的。

但是iframe⽤起来，真的是让⼈头痛，⾼度⽆法控制，难看的滚动条等等，下⾯我分享⼀下⾃⼰在处理iframe时的⼀些⼼得。

⾼度⾃适应<iframe src="/huiQunar" id="myiframe" frameborder=no scrolling="yes" style=" overflow-x:scroll; overflow-y:hidden; " width="100%" ></iframe> <script type="text/javascript" language="javascript">var ifm= document.getElementById("myiframe");ifm.height=document.documentElement.clientHeight;</script>⾼度⾃适应并且隐藏滚动条<html><head><script type="text/javascript">function showS(){document.getElementById("test").scrolling="yes";document.getElementById("test").style.overflow="scroll";//alert(document.getElementById("test").scrolling);}function hideS(){document.getElementById("test").scrolling="no";document.getElementById("test").style.overflow="hidden";//alert(document.getElementById("test").style.overflow);}</script><style><!-- .ifr{width:600px;height:600px;background:#fff;overflow:hidden;display:block;position:absolute;top: 0;left: 0;right: 0;} --></style></head><body><div class="ifr" onMouseOut="hideS()" onMouseOver="showS()" style=" width: 100%; height: 100%;"><iframe id="test" width="100%" height="100%" frameborder="0" src="" style="margin:0px;" ></iframe><script language="JavaScript">var iframe = document.getElementById("test");iframe.src = "/huiQunar";//以下判断iframe是否加载完,并且隐藏滚动条if (iframe.attachEvent){iframe.attachEvent("onload", function(){//hideS();//document.getElementById("loading").style.display="none";});} else {iframe.onload = function(){// hideS();//document.getElementById("loading").style.display="none";};}</script></div></body></html>取巧的⽅式隐藏滚动条取巧的⽅式就是，我们给iframe的宽度设置成101%，这样就可以把滚动条隐藏到屏幕外⾯，在将其overflow-x设置成hiden就⾏。

让iframe自适应大小 解决方案

让iframe自适应大小 解决方案

让iframe自适应大小解决方案第一种：<iframe name="src" width="100%" frameborder=0 scrolling=no src='admin.htm?catId=<c:outvalue="${model.l}" />'onload="this.height = document.frames['src'].document.body.scrollHeight" />例子：1，创建页面test.html 。

页面中含有一个iframe，name为ifrname ，id为ifrid，src 为iframe.html 页面。

<iframe src="ifarme.html" name="ifrname" height="" style="" onload="" id="ifrid" scrolling=""> </iframe>2，创建iframe.html 页面，里面含有一些内容。

<p>这是iframe页面，通过在父窗口页面或子页面添加JS来自动更改宽高，以适应内容的多少。

</p>要想使iframe自动适应宽和高，可以在test.html 页面iframe onload处增加一些JS代码。

如：<iframe src="ifarme.html" name="ifrname" height="" style="" onload="this.height= document.frames["ifrname"].document.body.scrollHeight" id="ifrid" scrolling=""></iframe>这样iframe即可以自动适应高度了。

Html-Css-iframe的自适应高度方案

Html-Css-iframe的自适应高度方案

Html-Css-iframe的⾃适应⾼度⽅案先看⼀个⽰例，有两个页⾯，1.html通过iframe嵌⼊2.html，两个页⾯都是同域的a.html<!DOCTYPE html><html><head><meta charset='utf-8' /><title>1.html</title></head><body><iframe id="ifr" src="b.html" frameborder="0" width="100%"></iframe></body></html>b.html，很多P元素将⾼度撑⾼⼀些<!DOCTYPE html><html><head><meta charset="utf-8"><title>b.html</title></head><body><p>这是⼀个ifrmae，嵌⼊在http://snandy.github.io/lib/iframe/1.html⾥</p><p>根据⾃⾝内容调整⾼度</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p></body></html>此时，浏览器访问1.html，效果如图可以看到，嵌⼊的iframe出现了滚动条，需求是不想出现滚动条，页⾯多⾼就显⽰多少。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

标题：HTML iframe 高度自适应技术在简书中的应用
一、引言
在现代网络技术中，HTML iframe 标签是一种非常常见的网页元素，它可以用来在一个网页中嵌入另一个网页。

这种技术在网页开发中被广泛应用，能够实现不同网页间的互相嵌套和协同展示。

而在简书这样的在线写作评台中，HTML iframe 高度自适应技术更是应用广泛，能够帮助用户更好地展示自己的作品，增加阅读体验。

本文将介绍HTML iframe 高度自适应技术在简书中的应用，以及其实现原理和优点。

二、HTML iframe 标签和简书
1. HTML iframe 标签简介
HTML iframe 标签是用来在当前 HTML 文档中嵌入另一个 HTML 文档的标记。

它可以通过指定其 src 属性来引入外部网页，并且可以设置宽度和高度等属性来控制显示的大小。

这种技术在网页开发中被广泛应用，能够实现各种不同网页的灵活布局和互相嵌套展示。

2. 简书对 HTML iframe 的支持
简书作为一个在线写作评台，允许用户在自己的文章中使用 HTML iframe 标签来嵌入其他网页内容，比如嵌入音视频播放器、地图、在线问卷等。

而为了提升用户阅读体验，简书也对 HTML iframe 标签的高度自适应进行了优化。

这可以帮助用户更好地展示自己的作品，并
为读者带来更好的阅读体验。

三、HTML iframe 高度自适应在简书中的应用
1. 基本原理
HTML iframe 高度自适应的实现原理是使用 JavaScript 监听被嵌入页面的高度变化，并将其实时传递给父页面，从而实现父页面中iframe 的高度自适应。

在简书中，用户在写作过程中只需要简单地引
入一个特定的JavaScript 代码片段，就能实现嵌入页面的高度自适应，无需复杂的手动调整。

2. 实际应用
用户在简书文章编辑页面中可以通过插入 <iframe> 标签来嵌入其他网页内容，比如一个在线地图。

在插入 <iframe> 标签时，只需要设
置合适的宽度，而不需要设置具体的高度。

然后在保存和发布文章时，简书会自动检测该 <iframe> 标签，并应用高度自适应技术，使得嵌
入页面的高度能够自动适应其内容的变化，让读者能够更好地阅读嵌
入的内容。

四、HTML iframe 高度自适应技术的优点
1. 增强用户体验
通过使用 HTML iframe 高度自适应技术，用户可以更好地展示自己
的作品，无需手动调整 iframe 的高度。

在简书这样的写作评台上，用户在插入嵌入页面后，不必担心页面高度不够或者太长的问题，简书
会自动调整 iframe 的高度，增强了用户的写作体验。

2. 提升阅读体验
对于读者来说，HTML iframe 高度自适应技术也能够带来更好的阅读体验。

嵌入的页面可以根据其内容自动调整高度，无需用户手动滚动页面，从而更加便捷地阅读嵌入内容。

这对于那些希望共享网页内容的作者来说，是一种非常实用的技术。

3. 提高展示效果
尤其是对于一些需要展示大量内容的页面，比如地图、长篇文章等，HTML iframe 高度自适应技术能够帮助用户更好地展示页面内容，提高了页面的展示效果。

这对于用户来说，不仅节省了手动调整页面的时间和精力，同时也提高了作品的质量和可读性。

五、总结
HTML iframe 高度自适应技术在简书中的应用，可以帮助用户更好地展示自己的作品，增加阅读体验。

简书作为一个以内容创作为核心的在线写作评台，对于这种技术的应用尤为重要。

在未来，随着网络技术的不断发展和用户体验的不断提高，相信 HTML iframe 高度自适应技术在简书中的应用也会得到更广泛的拓展和优化。

六、HTML iframe 高度自适应技术的发展趋势和应用场景
1. 发展趋势
随着移动互联网的快速发展，越来越多的用户开始在移动设备上阅读
和共享内容。

对于简书这样的在线写作评台来说，将HTML iframe 高度自适应技术扩展到移动端也是一个非常重要的发展趋势。

通过适配不同尺寸的移动设备，实现移动端页面的自适应显示，能够进一步提升用户的浏览体验。

2. 应用场景
在简书这样的写作评台中，HTML iframe 高度自适应技术的应用场景非常广泛。

除了常见的音视频播放器、地图等外部网页内容的嵌入外，还可以扩展到更多的领域，比如嵌入在线调查问卷、实时数据报表等。

这些应用场景不仅丰富了用户的创作方式，也丰富了读者的阅读体验。

七、HTML iframe 高度自适应技术应用中的技术挑战与解决方案
1. 技术挑战
实现HTML iframe 高度自适应技术在简书这样的在线写作评台中并不是没有挑战的。

主要挑战之一是不同嵌入页面的高度变化可能会导致页面性能问题，例如加载速度较慢、卡顿等。

另外，对于一些特殊的嵌入页面，可能会存在页面内容显示错乱的问题。

2. 解决方案
为了解决这些技术挑战，简书可以通过优化页面加载速度、采用缓存技术等手段，提升页面性能。

针对特殊的嵌入页面，简书可以制定一些特定的操作规范，例如提醒用户选择合适的嵌入页面以及合理的显
示样式，以避免页面显示错乱等问题。

八、结语
HTML iframe 高度自适应技术在简书中的应用对于提升用户体验和展示效果有着非常重要的意义。

通过不断优化这一技术，并结合移动互
联网的发展趋势，相信在未来简书会继续加强对这一技术的应用和优化，为用户和读者带来更好的体验和服务。

简书也将面临不少技术挑战，但通过创新和持续优化，可以克服这些挑战，不断提升用户体验，丰富在线写作的应用场景。

HTML iframe 高度自适应技术在简书中的应用将为在线内容创作领域带来更多的可能和更好的体验。

相关文档
最新文档