设置iframe高度随内容变动源码与解答

最新推荐文章于 2022-10-14 11:38:16 发布
最新推荐文章于 2022-10-14 11:38:16 发布
阅读量3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML 文章标签： iframe html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yuejingjiahong/article/details/6650990
本文介绍了一种使iframe元素高度能根据其内部内容自动调整的方法。通过设置frameborder属性为0并利用onload事件动态调整iframe高度，可以有效地避免因内容过多而产生的滚动条，实现更优的用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 iframe高度随内容变动

<iframe id="mainFrame" src="result.jsp" frameborder="0" width="100%" height="100%" onload="this.height=mainFrame.document.body.scrollHeight"></iframe>

 上面这句话，就实现了我们需要的效果!

这里主要注意的是2个地方：

1需要将iframe的frameborder设为0，不然还是有可能出现滚动条

2在onload事件中加入“this.height=mainFrame.document.body.scrollHeight”代码，这是为了让iframe的高度在html执行后来动态设置iframe的高度为内容的高度。

内容过长，有可能出现滚动条。。

源码分享爱好者：岳静

共同学习共同进步！

 

iframe根据页面内容自适应高度和宽度
09-03
iframe根据引用的页面内容自适应高度和宽度，直接查看例子，简单易操作
jQuery获取与设置iframe高度的方法
01-19
本文实例讲述了jQuery获取与设置iframe高度的方法。分享给大家供大家参考，具体如下： 设置iframe的高度，iframe的高度由iframe中的页面高度决定。 1.首先获取到iframe中页面的高度： 复制代码 代码如下:var iframe...
iframe高度根据内容变化
weixin_34367845的博客
10-15 263
我们在使用iframe的时候，iframe的高度并不会根据内容的多少来改变它的高度，如何让它根据内容来改变它的高度呢？在网上也找了好多代码，觉得下面这段代码是最有效的： 1 var browserVersion = window.navigator.userAgent.toUpperCase(); 2 var isOpera = browserVersion.indexOf("OPE...
Iframe高度随内容自动调节
shaily读书学习
09-02 2290
以下两种方法会让网页中的iframe高度自动适应嵌入页的内容高度。方式一：在被嵌入页里写入代码假设main.htm文件内容：    则在iframe.htm文件中加入如下代码：            function window.onload() {         if(top.location != self.location){             var a = window.par
iframe 的高度根据内容自动调整
旺仔专栏
11-29 2938
我们在做项目的时候如果用到了Ifram的话，可能会有一个很苦恼的问题，那就是 Ifram 的高度可以被页面撑大，但是撑大后就回不来了，那么，怎么让iframe 的高度自动根据iframe 里面页面的内容的高度来调整呢，很简单，只需将如下 js 代码 copy 到 Ifram 的 src 属性所指向的页面中就可以了。 function f_frameStyleResize
jQuery解决iframe高度随内容自动调整
栩风
12-19 8541
网上查了好多用着都不行，自己搞定了：在包含iframe的页面中加入以下脚本，基本思想是在iframe加载内容后重新设置高度，下面代码尽在IE6中用过，没在其他浏览器中测试。<!-- $( function() { //iframe高度随内容自动调整 $(.main).load( function() {
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
10-27
JavaScript 设置 iframe 高度自适应是一种常用的技术手段，主要用于实现内嵌网页内容能够根据实际内容动态调整其尺寸，以适应不同浏览器和不同屏幕尺寸。本文主要围绕在不同主流浏览器环境下如何使用 JavaScript ...
iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题
06-03
总的来说，通过使用JavaScript动态计算`<iframe>`内容的高度并设置`<iframe>`的高度，可以有效地解决`<iframe>`内容高度自适应以及设置高度后无法缩小的问题。同时，要注意兼容性问题和跨域限制，以确保在各种环境下...
iframe 根据内容调整高度
weixin_30252155的博客
11-19 126
最近在最tab页标签，准备用jquery-ui的tabs，但要链接到完整的html页面，jquery-ui的tabs是用div包装了内容，对于是一个完整的html会出现js冲突或不生效的问题，还是在div中添加一个irame 用iframe来显示，但iframe不像div会自动调整高度，但可以根据所加载的内容的高度，在iframe加载完成时，设置高度 function show...
iframe随内容改变高度
东明的专栏
08-09 1298
// 根据iframe内容动态修改iframe高度,最小高度为648pxvar getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]//extra height in px to add to iframe in FireFox 1.0+ browse
iframe高度随子页高度变化
05-15
iframe设置高度随子页高度的变化而变化 0分资源共享
在页面中嵌套Ifram框架,页面的高度会随着iframe中内容的高度改变而改变
韦育才的blog
08-30 5579
需要嵌套iframe内容的页面：         浏览页面后，发现高度没有自动适应，如图： 这时需要在iframe嵌套引用的页面CommunicationContentList.aspx加上页面加载事件 使得整个页面的高度随着CommunicationContentList.aspx中内容高度的改变而改变 将CommunicationConte
Iframe页面根据内容改变页面高度
weixin_39608271的博客
06-24 1667
Iframe页面根据内容改变页面高度问题描述实现方法 问题描述 jsp父级页面中有一个iframe，需要根据父级页面弹出框选中值改变iframe中的值，此时需要同步设置iframe的高度，防止iframe中出现滚动条。 实现方法 初始化时后设置iframe高度； <iframe src="" id="styleBomformKfover" height="0"></iframe> $("#styleBomformKfover").attr("src","url"); styleB
iframe根据页面的内容自动调整高度
jvm
03-10 8183
iframe根据页面的内容自动调整高度
让iframe根据内容自动调整高度~~~
【依然】
10-22 1752
iframe在网页中经常用到，尤其是不想用框架却想具有框架一样的导航与显示效果的时候。不用框架的原因，有时是受布局图片的限制，不太好划分矩形区域，比较适合用表格背景图片自动伸缩的形式，我最近就碰到一例。    网上很容易搜到在嵌入的页面的onload事件中调用如下代码的方法：    parent.document.all(self.name).height=document.body.scro
iframe根据内容自适应高度
weixin_41674235的博客
05-18 414
以下方法适用于两个网页同源 如果两个网页不同源，就无法拿到对方的DOM <iframe id="iframe" width="1200" src="" ></iframe> <script type="text/javascript"> window.onload = function () { document.getElementById("iframe").height=0; document.getElementById("iframe").heig
根据iframe里面的内容高度动态设置iframe高度
贵林之恋的博客
10-14 949
根据iframe里面的内容高度动态设置iframe高度
iframe自适应高度（随内容高度变化）
weixin_50641294的博客
05-25 6459
由于需求需要把一个项目的页面嵌套到另外一个页面，但是iframe高度不能写死，所以要让iframe高度自适应 1.解决思路： 获取嵌套页面的高度，把高度赋值给父页面的iframe 代码实现 1.首先在嵌套页面获取父级ifram元素 let iframeDom = parent.parent.document.getElementById("iframe") 2.获取嵌套页面高度 let box = document.getElementById("box") 3.把页面高度复制给父级ifram iframe
实现iframe自适应子页面内容高度的技巧与源码分析
3. 定时检测：通常情况下，无法在iframe内容加载完毕的第一时间准确获取其高度，因此可能需要设置定时器来周期性地检测iframe的高度是否发生变化，然后更新iframe的高度属性。 4. 窗口调整事件：当iframe的高度发生...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值