iframe ie7中自适应高度问题

最新推荐文章于 2023-10-24 14:08:59 发布
原创 最新推荐文章于 2023-10-24 14:08:59 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#iframe #ie #web应用开发

本文介绍了一种解决IE7浏览器下iframe无法100%自适应高度的问题的方法。通过JavaScript动态调整iframe的高度，确保其在加载完成后能够根据内容自适应高度。

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

做Web应用开发时，常会发现，iframe 在ie7的高度设置为100%后，而显示时，其高度并不是100%, 而在ie6中却正常显示

 

那么怎么才能让iframe的高度自适应呢

可以使用js控制iframe的高度

如下代码：

function reSetIframe(){
    var iframe = document.getElementById("iframeId");
    try{
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        var height = Math.max(bHeight, dHeight);
        iframe.height =  height;
    }catch (ex){}
}

 

获得body的高度，或你想设置的高度，

在iframe的onload事件中调用此方法就可以了。

<iframe src="" id="iframeId"  width="278" onload="reSetIframe()"> </iframe>

iframe 自适应高度[在IE6 IE7 FF下测试通过]
12-03
本文将详细介绍两种在IE6、IE7和Firefox下测试通过的`iframe`自适应高度的方法。 ### 第一种方法 这种方法使用JavaScript来动态调整`iframe`的高度。关键在于获取`iframe`内部文档的高度并将其设置为`iframe`的...
iFrame高度自适应终极解决方案（兼容IE7,8,9 Firefox3.6+,Chrome 12+）
03-28
NULL 博文链接：https://kev1n.iteye.com/blog/1222483
IE7兼容Iframe高度問題及Iframe問題
chinmo的收藏
02-17 1569
          function change_size()    {        document.getElementById("info_iframe").style.height=info_content.document.body.scrollHeight+1+"px";    }    防止被人frame       if   (top.location   !=   sel
IE7下IFRAME高度问题
weixin_33768481的博客
11-22 97
外部引用页 iframe { 　　height:100%; 　　width:100%; 　　overflow:auto; 　　position:absolute; 　　top:0; 　　left:0; } 内部被引用页 body { 　　height: 100%; } 就这么简单…… 转载于:https://blog.51cto.com/h...
让iframe的height=100%在IE7、8中正常显示
s471417811的专栏
04-17 186
具体原因不明，在载入的时候改变他的高度为用户区的高度即可，在iframe框架中加入如下代码： [code="C#"] onload="this.height=this.document.documentElement.scrollHeight" [/code] ...
iframe 自适应高度解决
热门推荐
18岁的骚年
07-15 1万+
html: &lt;body&gt; &lt;div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"&gt; &lt;ul class="layui-tab-title"&gt; &lt;li class="layui-this" data-value="/gcsof
iframe框架高度自适应在兼容模式下(ie7)不兼容的解决方法
a_c_c_a的专栏
05-09 1750
因为ie7之前的版本不兼容contentDocument属性，
vue项目内嵌iframe，iframe如何自适应高度
MISS_zhang_0110的博客
10-24 3107
【代码】vue项目内嵌iframe，iframe如何自适应高度。
php iframe 自适应高度,JS解决iframe之间通信和自适应高度的问题
weixin_42602726的博客
04-01 155
首先说明下，iframe通信 分为：同域通信 和 跨域通信。一、 同域通信所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 iframe比如： 的B.html页面，这两个页面数据进行通信，比如我想在父页面A.html 调用子页面当中的函数 我们很容易想到或者google下 document.getElementById(...
iframe高度自适应兼容IE
weixin_41571062的博客
09-13 327
在JS中先获取iframe元素,然后通过获取到的实例获取对应iframe页面的高度
JS实现iframe自适应高度的方法(兼容IE与FireFox)
10-22
本篇文章将详细介绍如何使用JavaScript实现`iframe`自适应高度的方法，以确保在IE和Firefox等主流浏览器上的兼容性。 首先，我们来看关键的JavaScript代码。在`<body>`标签下，我们需要插入以下脚本： ```html ...
javascript 装载iframe子页面，自适应高度
10-30
在实现`iframe`自适应高度的过程中，主要涉及到两个方面的技术处理： 1. **动态加载页面**：通过JavaScript来动态设置`iframe`的`src`属性，实现页面的切换。 2. **自适应高度**：监听子页面的加载完成事件，在页面...
FPGA实现多路高精度AD1246数据的高速采集与接收设计方案 - SPI 指南
08-08
如何利用FPGA实现多路高精度AD1246数据的高速采集与接收设计。首先简述了AD1246的特点及其在高精度数据采集中的重要性，接着阐述了FPGA在数据采集中的优势，如并行处理能力和灵活性。然后重点讨论了三个主要的设计步骤：一是接口设计，通过Verilog代码实现了SPI主控制器模块，用于与AD1246通信；二是多路数据采集处理，通过实例化多个SPI主控制器模块来并行处理多路AD1246数据；三是高速数据缓存与处理，使用FPGA内部的Block RAM作为缓存，确保数据的有效管理和快速访问。最后总结了整个设计流程，并指出实际应用中可能需要进一步优化的地方。 适合人群：从事嵌入式系统开发、FPGA设计以及数据采集系统的工程师和技术爱好者。 使用场景及目标：适用于需要高效、高精度数据采集的应用场合，如工业自动化、医疗设备、科研仪器等领域。目标是帮助读者掌握基于FPGA的多路高精度AD1246数据采集方法，提升数据采集系统的性能。 其他说明：文中提供的Verilog代码片段展示了关键部分的具体实现细节，有助于读者理解和实践。此外，还提到了未来改进的方向，如提高采样频率和优化缓存策略等。
java调用cmd命令.pdf
08-08
java调用cmd命令
Vue.js组件中实现平滑返回页面顶部动画
08-08
资源下载链接为： https://pan.quark.cn/s/d9ef5828b597 在本文中，我们将探讨如何通过 Vue.js 实现一个带有动画效果的“回到顶部”功能。Vue.js 是一款用于构建用户界面的流行 JavaScript 框架，其组件化和响应式设计让实现这种交互功能变得十分便捷。 首先，我们来分析 HTML 代码。在这个示例中，存在一个 ID 为 back-to-top 的 div 元素，其中包含两个 span 标签，分别显示“回到”和“顶部”文字。该 div 元素绑定了 Vue.js 的 @click 事件处理器 backToTop，用于处理点击事件，同时还绑定了 v-show 指令来控制按钮的显示与隐藏。v-cloak 指令的作用是在 Vue 实例渲染完成之前隐藏该元素，避免出现闪烁现象。 CSS 部分（backTop.css）主要负责样式设计。它首先清除了一些默认的边距和填充，对 html 和 body 进行了全屏布局，并设置了相对定位。.back-to-top 类则定义了“回到顶部”按钮的样式，包括其位置、圆角、阴影、填充以及悬停时背景颜色的变化。此外，与 v-cloak 相关的 CSS 确保在 Vue 实例加载过程中隐藏该元素。每个 .page 类代表一个页面，每个页面的高度设置为 400px，用于模拟多页面的滚动效果。 接下来是 JavaScript 部分（backTop.js）。在这里，我们创建了一个 Vue 实例。实例的 el 属性指定 Vue 将挂载到的 DOM 元素（#back-to-top）。data 对象中包含三个属性：backTopShow 用于控制按钮的显示状态；backTopAllow 用于防止用户快速连续点击；backSeconds 定义了回到顶部所需的时间；showPx 则规定了滚动多少像素后显示“回到顶部”按钮。 在 V
智慧社区与楼宇管理系统：集成智能照明、安防、设备管理与可视化大屏园区数据
最新发布
08-08
智慧社区系统的构建及其各个子系统的功能。首先阐述了智能照明与楼控系统的作用，如通过智能传感器实现自动调节灯光亮度，以及对楼宇内设备的集中管理和故障预警。接着讨论了web端管理系统与智慧楼宇管理系统的应用，强调其实时监控和数据分析能力，帮助管理人员高效掌握社区运行状况。然后介绍了可视化大屏园区数据的功能，使得各项数据一目了然，提升管理透明度。此外，文中提到安防系统采用多种技术保障社区安全，并建立设备台账确保设备良好运作。最后讲述了运维管理和能源管理的重要性，利用专业系统优化资源配置，降低运营成本。文章还展示了使用Axure和RP工具制作的产品原型，便于理解和推广智慧社区理念。 适合人群：社区管理者、物业工作人员、智慧城市研究者和技术开发者。 使用场景及目标：适用于新建或改造社区项目，旨在提升社区智能化水平，增强安全性，减少能耗，改善居住环境。 其他说明：智慧社区系统的建设涉及多个领域的技术和资源整合，未来将继续探索新技术以提供更多可能。
实现iframe自适应高度的详细教程与代码示例
当处理iframe的自适应高度问题时，关键在于如何确保iframe的高度能够根据其内容动态调整，以适应不同的屏幕大小和加载的内容长度。 在实现iframe的自适应高度过程中，首先，你需要了解iframe的一些基本属性。例如，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值