iframe框架高度自适应

最新推荐文章于 2023-04-12 10:09:10 发布
最新推荐文章于 2023-04-12 10:09:10 发布
阅读量733 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tinico/article/details/18033521
版权
最近做了一个后台界面，要求页面中的iframe框架高度自适应，自动根据内容的高度改变iframe的高度，并且兼容Chrome,FireFox,IE等各浏览器。

原理是在主框架页面使用JS循环测试框架内容的高度，然后设置iframe的高度。

需要说明一下的是：如果iframe的高度大于内容原本高度时，获取内容高度取得的还是是iframe的高度，所以有必要监听菜单的点击事件，和主框架的on load事件，把iframe高度恢复到一个较小的值，这个较小的值也不能太小，不能小于框架中内容的高度，否则会出现闪烁。

本文权当抛砖引玉，只要看懂了下面的代码，根据你的项目情况适当改改就好了



iframe高度自适应解决方式
lavendersue的博客
11-26 1534
带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家几种iframe动态调整高度的方法。 1、 <iframe width="778" align="center" height="200" id=...
iframe页面高度自适应
weixin_44541467的博客
06-28 552
iframe嵌套页面是经常会用到的，那么嵌套页面能够在主页无损显示呢。 事实证明显然不行，这已经是给iframe标签加了widt：100%和height：100%；的结果。 Height：100%无效，那直接给高度呢。 嗯，嵌套页面完全显示出来了。那切换到另一个嵌套页面试试。 不同的页面高度不同，切换到不同页面就会造成高度不够的情况。 那iframe页面高度自适应是...
Iframe框架高度自适应的实现
我、已开始练习。。。
03-13 619
（一）Iframe框架高度自适应的实现 Iframe框架高度自适应的实现,一个很牛的团队写的，简单的说就是在A.html中iframe引用B.htm(高度是不断变化的)并且自适应高度.网上也有很多方法，但是有些不全兼容ie6,ie7,ff,opera,在此贴下兼容ie6,ie7,ff,opera下的高度自适应的代码,并且已经封装好，只需要在被引用的页面加入这段代码 ”text/javasc
解决iframe高度自适应
weixin_44111803的博客
03-21 7773
解决iframe高度自适应原因第一种方法第二种方法 原因 iframe的高度不会随着页面高度的变化而变化，可能会导致页面显示不全，或者页面下方有空白的问题。 第一种方法 这个方式更适用于嵌套的页面，当嵌套多个iframe时，比如左侧有个侧边栏，右侧是个大的iframe，这个大的iframe又嵌套了一层：中间是iframe，但是右侧又有个侧边栏，这时候不想让iframe单独滑动（避免页面出现两个滚动条），而是想整个页面一起滑动时，用这个方法。 html代码： 注意一定要写height=‘100%’ scrol
iFrame框架高度自适应
weixin_33736649的博客
11-01 69
由于不想使用滚动条，又不想固定框架的高度，想使他根据内容的多少而自动调整高度。 1. 主页面的框架代码： <iframeid="ifr"src="test.html"width="660"frameborder="0"scrolling="no"name="aa"id="aa"></iframe> ...
layui实现iframe高度自适应
Ysmooth的博客
09-05 1592
目录ftl文件js文件 ftl文件 // A code block <div class="layui-tab-content"> <div class="layui-tab-item layui-show "> <iframe width=100% id="myiframe" onload="setHeight()" height="1" frameborder="0" src=""
iframe自适应高度
zhu_menglu的博客
04-12 5089
其中，padding-bottom的值需要根据iframe的宽高比来计算，例如，如果iframe的宽高比为16:9，则padding-bottom的值为56.25%（9除以16乘以100%）。可以设置iframe标签的高度为0，然后使用padding-bottom属性来设置iframe标签的高度，使其按照原来的比例自适应。这样，当浏览器窗口大小改变时，iframe标签的高度会自动按照原来的比例进行调整，从而实现自适应效果。
Iframe框架高度自适应
yg_201314的专栏
11-28 157
[code="java"] （一） Iframe框架高度自适应的实现 Iframe框架高度自适应的实现,一个很牛的团队写的，简单的说就是 在A.html中iframe引用B.htm(高度是不断变化的)并且自适应高度.网上也有很多方法，但是有些不全兼容ie6,ie7,ff,opera,在此贴下兼容ie6,ie7,ff,opera下的高度自适应的代码,并且已经封装好，只需要在被引用的页面加入这段代...
iframe 框架 高度 自适应 问题
nash01的专栏
05-23 126
js代码[code="java"] function reinitIframe(frame){ var iframe = document.getElementById(frame); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; ...
JQuery IFrame框架高度自适应（支持嵌套–兼容IE,ff,safafi,chrome）
04-13
本主题聚焦于一个特定的应用场景——"JQuery IFrame框架高度自适应"，这是一个常见需求，尤其是在构建跨浏览器的多页面应用时。通过使用jQuery来实现iframe的高度自适应，我们可以确保内容在不同浏览器（包括IE、...
Iframe框架高度自适应的实现.doc
12-08
Iframe框架高度自适应是一个重要的需求，特别是在内容动态更新或者跨域通信时，确保用户无需滚动两个独立的滚动条来查看全部内容。本篇文章将详细解释如何实现Iframe框架高度自适应，并分析给定代码的工作原理。 ...
iframe窗口高度自适应的又一个巧妙实现思路
09-04
本篇文章将详细介绍一种巧妙的实现`iframe`窗口高度自适应的思路。 首先，由于浏览器的同源策略限制，JavaScript无法直接跨域操作DOM元素，包括获取页面高度。为了解决这个问题，我们可以引入一个代理页面（agent....
js实现iframe自动自适应高度的方法
10-24
Iframe的`height`属性决定了其显示区域的高度，当我们想要Iframe内容自适应时，我们需要动态地修改这个属性值，使其等于Iframe内部页面的滚动高度（scrollHeight）。 下面是一个简单的JavaScript函数，用于自动调整...
IFrame跨域高度自适应实现代码
09-05
然而，当涉及到跨域时，IFrame的高度自适应问题会变得复杂。本文将深入探讨如何实现IFrame跨域高度自适应的解决方案。 首先，我们需要了解什么是跨域。在Web安全策略中，浏览器执行同源策略，这意味着一个网页只能...
用JS打开新窗口，防止被浏览器阻止的方法
热门推荐
先锋WEB技术
01-09 3万+
相信做web前端或者使用JS的朋友都会遇到需要在新窗口打开页面的情况，现在浏览器大都具有弹出窗口拦截功能，所以传统的window.open()不再那么好用了。借鉴于网上查到的方法和我个人的实践，把弹出新窗口的方法给大伙都介绍一下。第一种、使用原生javascript的window.open()方法（大部分情况下会被浏览自阻止）第二种、模拟表单(form)提交，原理是指定表单的action为想要打开
精简你的jQuery
先锋WEB技术
01-09 6610
在做一些要求较高的应用时（比如移动web），要求尽最大可能减小页面传输的数据，如果项目中在用jquery的话，感觉jquery好多功能其实也用不上，就算加载压缩版也有90多K，所以有必要对其精简，去除用不上的特性。目前网上找到的解决办法有两个：一、使用jQuipjQuip 是目的是将 jQuery 项目拆分成各个小模块，根据需要包含相应的 JS 模块，以减小浏览器加载 JS 的大小。核心文件 jq
jQueryTools Scrollable详解
先锋WEB技术
01-09 6049
在网页中加入各式各样的轮播广告都可以归结为滑动块的灵活使用，而jQueryTools提供了一套非常方便的滑动块解决方案，基本可以实现任何网页上的轮播图片或图片浏览功能。滑动块设置说明(scrollable) 属性 默认值 说明 clonedClass 'cloned' 当循环滑动时程序会自动复制一组滑动
jquery tools overlay 使用方法
先锋WEB技术
01-09 5835
首先来看看比较简单的overlay用法$(".my_overlay_trigger").overlay({ color: "#ccc", top: 50});上面这段代码，在拥有.my_overlay_trigger的元素上绑定了overlay特性，使它们成为了overlay的触发器(trigger)。触发器是有着落了，可是还没有用于显示的内容啊，即overlay的载体本身还没有的。默
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值