iframe高度自适应的6个方法
- 格式:doc
- 大小:13.32 KB
- 文档页数:4
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⾃动伸展适应⾼度动态的改变IFrame的⾼度,实现IFrame⾃动伸展,⽗页⾯也⾃动神缩原理:在IFrame⼦页⾯⼀加载的时候,调⽤⽗IFrame对象,改变其⾼度:1、在IFrame的具体页⾯(就是⼦页⾯),添加JavaScript复制代码代码如下:<script>function IFrameResize(){//alert(this.document.body.scrollHeight); //弹出当前页⾯的⾼度var obj = parent.document.getElementById("childFrame"); //取得⽗页⾯IFrame对象//alert(obj.height); //弹出⽗页⾯中IFrame中设置的⾼度obj.height = this.document.body.scrollHeight; //调整⽗页⾯中IFrame的⾼度为此页⾯的⾼度}</script>2、在IFrame的具体页⾯(就是⼦页⾯)的body中,添加onload事件复制代码代码如下:<body onload="IFrameResize()">3、为⽗页⾯的IFrame标签添加ID,即上⾯第⼀步,⽅法体中的第2⾏所写到的childFrame复制代码代码如下:<IFRAME border=0 marginWidth=0frameSpacing=0 marginHeight=0src="frame1.jsp" frameBorder=0noResize scrolling="no" width=100% height=100% vspale="0" id="childFrame"></IFRAME>:复制代码代码如下://动态改变⽗类iframe的⾼度//iframe页⾯调⽤的js$(function(){//取到窗⼝的⾼度var winH = $(window).height();//取到页⾯的⾼度var bodyH = $(document).height();if(bodyH > winH){window.parent.document.getElementById("mainFrame").height=bodyH;}else{window.parent.document.getElementById("mainFrame").height=winH;}});⽗页⾯的iframe为复制代码代码如下:<iframe src="main.action" height="700" frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>。
iframe的用法403 -回复如何使用iframe 标签及其常见问题的解决方案在网页开发中,iframe 标签是一种嵌入式内容的常见方式。
它允许在一个网页中嵌入另一个网页或文档,并且可以在父网页和子网页之间进行通信。
但是,使用iframe 标签可能会遇到一些问题,本文将一步一步地回答如何使用iframe 标签并解决常见问题。
第一步:了解iframe 标签的基本语法和属性在使用iframe 标签之前,我们需要先了解一些基本语法和属性。
下面是iframe 标签的基本语法:html<iframe src="URL" width="width" height="height" frameborder="0"></iframe>其中,src 属性指定要嵌入的网页或文档的URL,width 和height 属性指定iframe 的宽度和高度,frameborder 属性用于控制iframe 边框的显示。
第二步:嵌入其他网页或文档要嵌入其他网页或文档,我们只需在src 属性中指定要嵌入的网页的URL。
例如,要嵌入一个名为"example.html" 的网页,可以使用以下代码:html<iframe src="example.html" width="500" height="300" frameborder="0"></iframe>请确保嵌入的网页在同一个域上,否则由于同源策略,可能会遇到跨域访问限制。
第三步:在父网页和子网页之间进行通信使用iframe 标签,父网页和子网页之间可以进行通信。
这在一些特殊的场景下非常有用,例如,父网页需要向子网页传递一些数据,或者子网页需要通知父网页某些事件。
IFrame ⾃适应⼤⼩(全屏已实现)近⽇做项⽬中⽤到页⾯中嵌套iframe ,想要实现⾃适应⼤⼩,并且在IE 中按F11键全屏时也可以⾃适应⼤⼩。
在⽹上搜来的代码多数只适应页⾯中只有单个iframe 情况,但笔者页⾯还有⼀个logo 图⽚。
经反复实现,如下代码可实现:}window.onresize = resize; // --></mce:script><body scroll="no"><img border="0" width="100%" height="84" src="./images/logo.png" mce_src="images/logo.png"><iframe id="frame3d" name="frame3d" frameborder="0"width="100%" scrolling="auto"style="margin-top: -4px;"onload="this.style.height=document.body.clientHeight-84"height="100%" src="./map.jsp" mce_src="map.jsp"></iframe></body></html> 1、页⾯加载实现:iframe 的onload 事件,之所以减去84,是logo 图⽚的⾼度,把这个位置给让出来。
2、全屏实现:window.onresize 事件document.getElementById('frame3d').style.height = document.body.clientHeight - 84+"px";。
iframe多层嵌套⽆限嵌套⾼度⾃适应的解决⽅案有A,B,C三个页⾯,A页⾯包含B页⾯,B页⾯包含C页⾯.A页⾯随着B页⾯⾃适应,C页⾯随着B页⾯⾃适应A页⾯复制代码代码如下:<body><iframe id="main" name="main" width="980" scrolling="no" frameborder="0" src="B页⾯"onload="this.height=main.document.body.scrollHeight;this.width=main.document.body.scrollWidth;if(this.height < 410) {this.height=410;}"></iframe></body>B页⾯复制代码代码如下:<body><!--左边--><div style="flost:left;">左边菜单</div><!--右边--><div style="flost:right;"><iframe id="testIframe" name="testIframe" frameborder=0 style="width: 680px;" scrolling="no" src="C页⾯"></iframe></div></body>C页⾯将下⾯这个JS函数写到最最底层的页⾯中(即最孙⼦的那个页⾯) 并在body的onload事件中调⽤该⽅法【下⾯这个公式是万能公式】复制代码代码如下:<script type="text/javascript">//进⾏Iframe的⾃动撑开,让所有⽗页⾯的Iframe都⾃动适应包含页⾼度function autoHeight(){var doc = document,p = window;while(p = p.parent){var frames = p.frames,frame,i = 0;while(frame = frames[i++]){if(frame.document == doc){frame.frameElement.style.height = doc.body.scrollHeight + 'px'; // 这⾥⼀定要注意⽕狐必须要加'px‘ 否则⽕狐⽆效doc = p.document;break;}}if(p == top){break;}}}</script><body onload="autoHeight();"><!--经测试这个最最最⼦的页⾯的body中必须要有⼀个有⾼度的div才⾏否则上⾯的⾃适应⽣效--> <div style="height: 1px;"></div><div style="padding-bottom: 10px;"> <!--这句话也是必不可少的-->这⾥可以写真正的内容并且给该div的padding-bottom设⼀个值</div></body>。
document的几种高度及iframe自适应常用方法四种浏览器对document.body 的clientHeight、offsetHeight 和 scrollHeight 的解释。
这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight大家对clientHeight 都没有什么异议,都认为是内容可视区域的高度(在后台调整iframe的大小时,通常不用这个,而是用scrollHeight ,即整个网页内容的高度),也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为offsetHeight 是网页内容实际高度,可以小于clientHeight。
scrollHeight(自适应时候经常用到)IE、Opera 认为scrollHeight 是网页内容实际高度,可以小于clientHeight。
NS、FF 认为scrollHeight 是网页内容高度,不过最小值是clientHeight。
简单地说clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。
scrollHeight 则是网页内容实际高度。
同理clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。
让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即可以自动适应高度了。
iframe 高度自适应1、目的系统通过一内嵌页面(iframe) 来展现网页内容(也包括内嵌页中再嵌一个网页),这将会引起如下几个问题:a.不同的网页内容多少不一致,导致iframe的高度无法与实现内容或浏览器高度相匹配。
b.窗口缩放时,不能iframe不能进行自动调整。
针对这两个问题,写了一些js方法,使iframe自动适应内容或浏览器高度。
2、js代码在主框回页面中包括如下js方法:/*** 内嵌页面的高度设置*/function handleFrameLoad() {var hDoc = getBodyHeight(document);var tblmain = document.getElementById('tblMain');var mFrame = window.mainFrame;var hFrameDoc = getFrameHeight(mFrame);var hTable = hDoc-80; //减去该页面除iframe外其他控件所占的高度.if(hFrameDoc > hTable) hTable = hFrameDoc;tblmain.style.height = hTable;mFrame.height = hTable;if(window.mainFrame.moduleRight != null){//表示该内嵌页,包含内嵌的页面,页iframe的id固定为moduleRight。
initFrameHeight(mFrame,hTable);}}/*** 获取当前页面的高度*/function getBodyHeight(doc){if(doc.all) return doc.body.offsetHeight;else return doc.body.scrollHeight;}/*** 获取内嵌页中的高度.* 若另含子内嵌(moduleRight)页时,应考虑该页面的高度.*/function getFrameHeight(mFrame){var h1 = mFrame.document.body.offsetHeight;var h2 = mFrame.document.body.scrollHeight;if(mFrame.moduleRight != null){var h3 = mFrame.moduleRight.document.body.scrollHeight;if(h3 > h2) h2 = h3;}return h2;}/*** 设置子内嵌页面的高度.* 通过设置iframe所在table的高度来调整。
web响应式布局中iframe⾃适应的⽅法问题在响应式布局中,我们应该⼩⼼对待iframe元素,iframe元素的width和height属性设置了其宽度和⾼度,但是当包含块的宽度或⾼度⼩于iframe的宽度或⾼度时,会出现iframe元素溢出的现象:这样溢出的iframe会破坏页⾯的布局。
我们可以采⽤⼀种⽅法让iframe元素也具有响应性,拭⽬以待。
解决⽅法iframe元素本⾝并⽆法伸缩,除⾮通过js显⽰的设置其宽度。
但是我们可通过⼀个iframe-container元素来包裹iframe,同时让iframe-container元素的宽度充满包含块的宽度,并且根据iframe的长宽⽐,设置iframe-container元素的padding-bottom百分⽐。
其实,这种⽅式的精髓就在于设置iframe-container元素的padding-bottom属性,设置该属性的⽬的在于变相的设置元素的⾼度。
因为给padding-bottom设置百分⽐,是相对于⽗元素的width⽽⾔的,如果对height属性设置百分⽐,则相对于⽗元素的height,⽽⽗元素的height值我们通常使⽤默认的auto,因此会出现⼦元素height也为0.因此,我们只能给padding-bottom设置属性。
这样,只需让iframe元素充满iframe-container即可。
复制代码代码如下:.wrap{width: 400px;margin: auto;border: 5px solid greenyellow;}.iframe-container{height: 0;padding-bottom: 97.6%;position: relative;}.iframe-container iframe{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}@media screen and (max-width: 400px) {.wrap{width: 300px;}}复制代码代码如下:<div class="wrap"><div class="iframe-container"><iframe height=498 width=510 src="<ahref="/embed/XOTE0MjkyODgw">/embed/XOTE0MjkyODgw</a>" frameborder=0 allowfullscreen></iframe></div></div>结果显⽰的状态:当视⼝宽度⼤于400px时:当视⼝宽度⼩于400px时:总结以上就是这篇⽂章的全部内容了,希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助,如果有疑问⼤家可以留⾔交流。
高度自适应的3种方法
高度自适应是指网页元素能够根据内容的多少自动调整高度,
以适应不同屏幕尺寸和内容变化。
以下是三种常见的高度自适应方法:
1. 使用CSS的Flexbox布局,Flexbox是一种强大的布局模型,可以轻松实现高度自适应。
通过将容器设置为display: flex,并
使用align-items属性来控制元素在交叉轴上的对齐方式,可以使
元素根据内容自动调整高度。
2. 使用CSS的Grid布局,CSS Grid布局也是一种强大的布局
模型,可以实现高度自适应。
通过将网格容器设置为display: grid,并使用grid-template-rows属性来定义行高,可以让网格中
的元素根据内容自动调整高度。
3. 使用CSS的calc()函数,calc()函数可以在CSS中进行数
学运算,可以用来实现高度自适应。
例如,可以使用calc()函数来
计算元素的高度,让其根据内容的多少自动调整。
这些方法都可以帮助实现网页元素的高度自适应,让网页在不
同设备和内容情况下都能够呈现出最佳的布局效果。
当然,具体使用哪种方法取决于实际需求和兼容性考量。
iframe的用法什么是iframe在Web开发中,iframe是一种HTML元素,用于在当前页面中嵌入另一个页面。
它可以在一个网页中显示另一个网页,类似于一个容器,可以将其他网页嵌入到当前网页中的特定区域。
通过使用iframe,我们可以在一个页面中同时显示多个不同的网页内容。
iframe的语法以下是iframe的基本语法:<iframe src="URL" frameborder="0" width="100%" height="500px"></iframe>•src:指定要嵌入的页面的URL。
可以是本地文件路径或外部网址。
•frameborder:设置iframe的边框是否显示,默认为1显示边框,设置为0则不显示边框。
•width和height:设置iframe的宽度和高度。
iframe的特点和优势1. 网页嵌套通过使用iframe,可以将其他网页嵌套到当前网页中。
这样可以实现在一个页面中同时显示多个不同的网页内容,提供更丰富的信息和功能。
2. 代码复用通过使用iframe,可以将其他网页作为模块嵌入到当前网页中,实现代码的复用。
这样可以减少重复编写代码的工作量,提高开发效率。
3. 并行加载当使用iframe嵌套其他网页时,这些网页会并行加载。
这意味着在加载一个网页的同时,可以继续加载其他网页,提高页面加载速度。
4. 独立性通过使用iframe,可以实现嵌套的网页与当前网页的独立性。
这意味着嵌套的网页可以有自己的独立的样式和脚本,不会与当前网页产生冲突。
5. 跨域通信使用iframe可以实现跨域通信。
在同源策略限制下,不同域的网页无法直接进行通信,但是通过在iframe中嵌入其他域的网页,可以通过JavaScript等方式进行跨域通信。
iframe的用途1. 嵌入其他网页最常见的用途是将其他网页嵌入到当前网页中。
vue iframe里默认占高度全文共四篇示例,供读者参考第一篇示例:在使用Vue开发时,经常会遇到需要在页面中嵌入iframe的情况。
而在嵌入iframe时,经常会碰到一个问题,那就是iframe默认占据的高度问题。
通常情况下,iframe默认并不会占据任何高度,导致页面显示不全,给用户带来不便。
那么应该如何解决iframe默认占高度的问题呢?本文将从以下几个方面进行探讨。
一、什么是iframe?iframe,全称为Inline Frame,是HTML标签之一,用于在页面中嵌入另一个HTML文档。
通过iframe可以实现在页面中显示其他网页的内容,常用于嵌入第三方网站、广告等。
在Vue项目中,有时候也会通过iframe实现一些需求,比如嵌入地图、视频等内容。
二、iframe默认占高度问题的原因在默认情况下,iframe并不会占据任何高度,这是由于iframe本身的特性所决定的。
当iframe没有设置高度属性时,会根据内部内容的高度来决定自身的高度。
如果内部内容没有具体的高度,那么iframe就会显示为空白,或者只显示部分内容。
这种情况下,用户就会感觉页面显示不全,影响了用户体验。
1. 设置固定的高度最简单的解决方法就是直接在iframe标签中设置一个固定的高度值,这样就能确保iframe一直占据指定的高度。
比如:```<iframe src="" width="100%"height="500px"></iframe>```通过设置height属性为固定值,就能确保iframe在页面中占据固定的高度,不会出现默认占高度问题。
2. 使用JavaScript自适应高度如果内部内容的高度是不确定的,或者需要动态改变高度,可以通过JavaScript来自适应调整iframe的高度。
可以通过监听iframe 内部内容的高度变化来动态修改iframe的高度,从而确保iframe始终能够显示完整的内容。
修改iframe在网页设计中,往往需要使用iframe来嵌入其他的网页、视频等内容。
然而,在实际应用中,我们有时需要对iframe进行一些修改,以满足特定需求。
本文将分步骤介绍如何修改iframe。
步骤一:选择需要修改的iframe首先,需要在HTML文件中找到需要修改的iframe代码。
在一般情况下,iframe的代码会包含在一个<html>标签中。
找到代码后,复制代码并保存到一个文本文档中,以备后用。
步骤二:修改iframe的尺寸将修改尺寸的代码添加在需要修改的iframe标签内的style属性中。
例如,若需要将iframe的宽度设置为800像素,高度设置为600像素,则需将以下代码添加到iframe标签内:style="width:800px;height:600px;"如果需要将iframe的大小根据内容自适应,可以将宽度和高度都设置为“auto”:style="width:auto;height:auto;"步骤三:修改iframe的位置将修改位置的代码添加在需要修改的iframe标签内的style属性中。
例如,若需要将iframe的左边距离顶部的距离设置为100像素,上边距离左侧的距离设置为200像素,则需将以下代码添加到iframe标签内:style="position:absolute;top:100px;left:200px;"步骤四:修改iframe的边框及背景颜色将修改边框及配色的代码添加在需要修改的iframe标签内的style属性中。
例如,若需要将iframe的边框设置为1像素的红色实线边框,背景颜色设置为浅灰色,则需将以下代码添加到iframe标签内:style="border:1px solid red;background-color:#f0f0f0;"步骤五:修改iframe的滚动条可以对iframe的滚动条进行隐藏、显示或自动调整,并将相关代码添加在iframe标签的scrolling属性中。
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 1. left2. right3. top4. middle5. bottom 不赞成使用。
请使用样式代替。
规定如何根据周围的元素来对齐此框架。
TFframeborder1. 12. 0规定是否显示框架周围的边框。
TFheight 1. pixels2. %规定iframe的高度。
TF longdesc URL 规定一个页面,该页面包含了有关iframe的较长描述。
TFmarginheight pixels 定义iframe的顶部和底部的边距。
TF marginwidth pixels 定义iframe的左侧和右侧的边距。
TF name frame_name 规定iframe的名称。
TF规定是否在iframe中显示滚动条。
TF scrolling 1. yes2. no3. autosrc URL 规定在iframe中显示的文档的URL。
TF定义iframe的宽度。
TF width 1. pixels2. %示例复制代码代码如下:<iframesrc="" width="200" height="500">脚本之家使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问脚本之家。
iframe自适应高度及滚动条颜色设置iframe自适应高度Demo页面:主页面iframe_a.html,被包含页面iframe_b.htm 和iframe_c.html下面开始讲:通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条。
我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的。
而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如何做动态同步的问题。
另外,在兼容性方面,也研究的不彻底。
这篇文章,希望在这两个方面再做一些深入。
可能有人还没接触到这个问题过,先说明一下,什么是自适应高度吧。
所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了 iframe的border 和scrollbar,让人看不出它是个iframe。
如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了。
而如果iframe要切换页面,或者被包含页面要做DOM 动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了。
顺便说下,iframe在迫不得已的时候才去用,它会给前端开发带来太多的麻烦。
传统做法大致有两个:方法一,在每个被包含页在本身内容加载完毕之后,执行JS取得本页面的高度,然后去同步父页面的iframe高度。
方法二,在主页面iframe的onload事件中执行JS,去取得被包含页的高度内容,然后去同步高度。
在代码维护角度考虑,方法二是优于方法一的,因为方法一,每个被包含页都要去引入一段相同的代码来做这个事情,创建了好多副本。
两个方法都只处理了静的东西,就是只在内容加载的时候执行,如果JS去操作DOM引起的高度变化,都不太方便。
如果在主窗口做一个Interval,不停的来获取被包含页的高度,然后做同步,是不是即方便,又解决了JS操作DOM的问题了呢?答案是肯定的。
Demo页面:主页面iframe_a.html,被包含页面iframe_b.htm 和iframe_c.html主页面代码示例:一直执行,效率会不会有问题?我做了测试,同时开5个窗口(IE6、IE7、FF、Opera、Safari)执行这个代码,不会对CPU有什么影响,甚至调整到2ms,也没影响(基本维持在0%占用率)。
iframe高度自适应的6个方法
总所周知,IFrame的高度很容易被改变,以便满足其所需的文档大小。
在默认情况下,某些浏览器会在IFrame中自动设置高度,以适应内容的大小。
但是,一旦IFrame的内容发生变化,它的高度还是不会随着变化。
为了解决这个问题,我们可以使用以下6种不同的方法来让IFrame自动调整自身的高度:
(1)使用CSS
CSS是最简单有效的方法,可以用来让IFrame高度自动调整。
我们可以使用CSS的“height: auto !important”属性,只需给IFrame 添加一个包含此CSS规则的样式,就可以让IFrame在文档大小发生变化时随之调整自身的高度。
(2)使用JavaScript
与CSS不同,JavaScript可以精确地获取iframe的内容,并将其高度设置为文档的高度。
只需使用JavaScript的offsetHeight属性,就可以计算出文档的高度,并将其设置为IFrame的高度。
(3)使用jQuery
jQuery也是一种强大的JavaScript库,可以用来设置IFrame 的自动高度。
只需使用jQuery的resize()方法,然后使用height()和width()方法获取文档的高度和宽度,再将其分别设置为IFrame 的高度和宽度,就可以轻松地使IFrame自动调整自身的高度。
(4)使用AngularJS
AngularJS是一种前端开发框架,可以用来让IFrame的高度自
动调整。
在AngularJS中,我们可以使用ng-style指令来定义IFrame 的高度,并使用“height: auto !important”属性,以便在文档大小发生变化时自动调整IFrame的高度。
(5)使用React
React也是一种前端开发框架,可以用来让IFrame的高度自动调整。
只需使用React的onResize()方法,获取IFrame实例,然后使用getBoundingClientRect()方法获取其当前的高度,再将其设置为IFrame的高度,就可以让IFrame自动调整自身的高度。
(6)使用Vue.js
Vue.js也是一种前端开发框架,可以用来让IFrame的高度自动调整。
Vue.js可以使用watch()方法来监视文档的大小变化,并在变化时将IFrame的高度设置为文档的高度。
总之,使用以上的6种方法,就可以让IFrame的高度自动适应文档的大小,从而满足用户的各种需求。
只需选择一种合适的方法,就可以轻松地实现IFrame高度自适应的效果。
2、CSS是最常用的iframe高度自适应方法
CSS是今天最常用的方法,可以让IFrame的高度自动调整以适应文档的大小。
只需给IFrame添加一个含有“height:
auto !important”属性的样式,就可以让IFrame在文档大小变化时随之改变自身的高度。
此外,CSS还可以用来设置IFrame的最小和最大高度。
只需使用“min-height”和“max-height”属性,就可以指定IFrame的最
小高度和最大高度,以确保IFrame不会超出指定的高度范围。
3、JavaScript是另一种可以实现IFrame高度自适应的方法
与CSS不同,JavaScript可以精确地获取iframe的内容,并将其高度设置为文档的高度。
只需使用offsetHeight属性,就可以计算出文档的高度,并将其设置为IFrame的高度。
此外,JavaScript还可以用来设置IFrame的宽度。
只需使用offsetWidth属性,就可以计算出文档的宽度,并将其设置为IFrame 的宽度。
4、使用jQuery也可以实现IFrame高度自适应
jQuery是一种强大的JavaScript库,可以用来让IFrame的高度自动调整。
只需使用jQuery的resize()方法,然后使用height()和width()方法获取文档的高度和宽度,再将其分别设置为IFrame 的高度和宽度,就可以轻松地使IFrame自动调整自身的高度。
此外,jQuery还可以用来设置IFrame的最小和最大高度。
只需使用minHeight()和maxHeight()方法,就可以指定IFrame的最小高度和最大高度,以确保IFrame不会超出指定的高度范围。
5、AngularJS、React和Vue.js也可以用来实现IFrame高度自适应
AngularJS、React和Vue.js都是一种前端开发框架,可以用来让IFrame的高度自动调整。
AngularJS可以使用ng-style指令来定义IFrame的高度,并使用“height: auto !important”属性,以便在文档大小发生变化时自动调整IFrame的高度。
React可以使用
onResize()方法,获取IFrame实例,然后使用getBoundingClientRect()方法获取其当前的高度,再将其设置为IFrame的高度,以自动调整IFrame的高度。
Vue.js可以使用watch()方法来监视文档的大小变化,并在变化时将IFrame的高度设置为文档的高度。
6、结论
从上面的介绍可以看出,使用CSS、JavaScript、jQuery、AngularJS、React和Vue.js,就可以让IFrame的高度自动调整,从而满足用户的各种需求。
不同的方法有不同的特点,只需根据实际情况选择一种合适的方法,就可以轻松地实现IFrame高度自适应的效果。