iframe 如何设置其自适应高度

如题所述

在主页面iframe的onload事件中执行JS,去取得被包含页的高度内容,然后去同步高度。
在代码维护角度考虑,方法二是优于方法一的,因为方法一,每个被包含页都要去引入一段相同的代码来做这个事情,创建了好多副本。
如果只考虑FX和IE,并且,iframe里面内容也不进行DOM操作,那仍然可以用最简单最方便的传统处理方式:

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>

两个方法都只处理了静的东西,就是只在内容加载的时候执行,如果JS去操作DOM引起的高度变化,都不太方便。
温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2016-11-13
<iframe name="Info1" id="Info1" src="info.html" onload="this.height=Info1.document.body.scrollHeight" width="100%" scrolling="no" frameborder="0"></iframe>

关键的就是要加上这句话就可以了
onload="this.height=Info1.document.body.scrollHeight"本回答被提问者采纳
第2个回答  2011-07-09
你看一下书名

html iframe如何设置高
<iframe src="\/index.html" style="width: 400px; height: 300px"><\/iframe> 通过CSS,你可以更加灵活地根据网页设计调整iframe的高度。需要注意的是,iframe还有其他属性可以配置,但上述方法是设置高度最常用的方式。记得在实际应用中,要确保iframe的高度和宽度设置与嵌入内容的尺寸相适应,以保持良好...

怎么让iframe自适应高度
方法一,在每个被包含页在本身内容加载完毕之后,执行JS取得本页面的高度,然后去同步父页面的iframe高度。方法二,在主页面iframe的onload事件中执行JS,去取得被包含页的高度内容,然后去同步高度。在代码维护角度考虑,方法二是优于方法一的,因为方法一,每个被包含页都要去引入一段相同的代码来做这个...

如何设置iframe高度自适应,在跨域的情况下能做到吗
假设iframe子页面和父页面都在同一域内,通过该脚本可以对给定id的iframe高度进行动态调整。为了防止父页面在子页面之前加载完成,该函数会每隔2秒重新执行一次,一共执行3次。极端情况下子页面的加载速度会慢于父页面,可适当对执行次数和时间做调整。<iframe frameborder="0" width="450" marginheight=...

如何在HTML的iframe中,获取被调用的页面的高度,并作为这个iframe的高 ...
同域情况下就不用多说了,直接在被嵌套的页面B中获取其自身高度并操作其父窗口main的dom属性即可。

javascript中如可控制iframe的滚动条位置
通过iframe的scrolltop属性进行位置设置 第二种: 通过jquery的scrolltop方法进行位置设置。 示例 1 2 3 4 5 <iframe width="100%" height="100%" id="ghrzFrame" frameborder="0" scrolling="auto" name="ghrzFrame" src="iframe.html"><\/iframe> 第一种: document.getElementById('ghrzFrame').scrollTop...

html内联框架?
2、首先,要嵌入html并不一定要写js代码,如图使用iframe标签,设置其src属性即可。注意其scrolling=auto以添加滚动条。另外,其width和height要单独设置。其链接到的html页面内容如图所示。3、可以使用!--#includefile=test.html--这样来引入,或者$(#div).load(test.html);这样来动态加载,方法还是有...

vue3手册?
vue中wangeditor如何自适应高度 wangEditor3使用手册: 方法:菜单和编辑器区域是销森蚂分离的,分别创建各自的亏埋div,设置编辑区域div的height:auto。 1.在项目中,首先引入插件,创建编辑器,初始化 2.css样春春式 Vant前端框架 Vant轻量、可靠的移动端Vue组件库 Vant是一个轻量、可靠的移动端组件库,于2017年开源...

dw表格无填充如何设置?
example.htm是被嵌入的页面,标签<IFRAME>还有一些可用的参数设置如下: marginwidth:网页中内容在表格右侧的预留宽度;例如:marginwidth="20",单位是pix,下同。 marginheight:网页中内容在表格顶部预留的高度; hspace:网页右上角的的横坐标; 已赞过 已踩过< 你对这个回答的评价是? 评论 收起 shi...

css案例(css案例源代码)
至于右边和底部缩进,很简单,修改iframe的宽度和高度就可以了。用CSS做将如何字体居中? 使用CSS将字体居中可以使用HTML中的center标签,简单方便。 具体介绍CSS中Center标签定义、其使用方法及相关内容: 对浏览器支持:所有浏览器都支持center标签。 定义和用法:对其所包括的文本进行水平居中。 标准属性:id,class,title,...

eWebEditor在线编辑器后台如何设置?怎样调用?
你进入后台后,在样式设置里有“工具栏设置”功能,可按你的需要增添各工具按钮。一般调用有两种模式:1.标准模式,即嵌入框架到网页 2.弹出窗口模式。调用语句(举例):<iframes src="..\/ewebeditor\/standard.html?style=standard&id=word"> style为调用风格,id为你希望编辑器里的内容返回到你页面...

相似回答