在做iframe自适应的时候，iframe高度不断自增长

最新推荐文章于 2021-12-24 10:50:08 发布
最新推荐文章于 2021-12-24 10:50:08 发布
阅读量1.2k 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zb219/article/details/43408219
版权

如果iframe里面的网页是这样的

<html style="height:100%">

<body style="height:100%">

<div style="margin-top:10px">

</div>

</body>

</html>

你做自适应的时候，iframe高度就会不断增长。

因为当你给iframe高度设置为400的时候，那么body就会增长成400，而html就会增长成410,这时你又把iframe的高度设置成410,那body就会变成410

如此循环。

其实我们经常会用reset.css

里面就会写html,body{height:100%}

zb219
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
calendar.js时间控件代码
zb219的专栏
10-24 8990
 document.write("");document.write("");function writeIframe(){    var strIframe = ""+    "*{font-size: 12px; font-family: 宋体}"+    ".bg{  color: "+ WebCalendar.lightColor +"; cursor: default; backgrou
js 判断文字是否破行
zb219的专栏
11-11 5832
日前有这样一个需求，本来是想在div里面嵌个span，再看span的长度是否大于父div长度，如果大于，则破行。 但是发现在IE8－IE10的浏览器不行，后来发现 IE8以后，IE对offsetWidth，scrollWidth的属性发生了变化，只表示看到的部分 比如如果一个div display:none的话，那offsetWidth会是0，scrollWidth一样，如果span的父di
iframe 高度自适应，并且子页面的高度不断变化
kola的博客
08-24 986
做网站的时候一般都是左边导航，右边是根据导航引入不同的html,这时一般都会用到iframe,但是iframe的高度自适应就成了一个大问题。 如何是使高度自适应，我今天在解决这个问题的时候花了很长时间，下面就是我的笔记。 主要是为iframe加上一个监听函数 $(function(){   window.setInterval(iframeResize,200);   functio
js实现iframe自动自适应高度的方法
10-24
主要介绍了js实现iframe自动自适应高度的方法,涉及javascript操作iframe框架的技巧,非常具有实用价值,需要的朋友可以参考下
iframe嵌套的html高度,iframe 多层嵌套 无限嵌套 高度自适应的解决方案
weixin_31969181的博客
06-29 181
有A,B,C三个页面,A页面包含B页面,B页面包含C页面.A页面随着B页面自适应,C页面随着B页面自适应A页面复制代码代码如下:onload="this.height=main.document.body.scrollHeight;this.width=main.document.body.scrollWidth;if(this.height < 410){this.height=410;}...
jquery ajax应用中iframe自适应高度问题解决方法
10-26
很多管理系统中，都使用iframe进行信息内容的展示方式，或者作为主菜单的链接展示内容。使用iframe的问题就是自适应高度的问题
教你用jquery实现iframe自适应高度
01-19
iframe代码，注意要写ID 代码如下:<iframe src=”test.html” id=”main” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>jquery代码一： 代码如下://注意：下面的代码是放在test.html调用 $(window.parent.document).find(“#main”).load(function(){ var main = $(window.parent.document).find(“#main”); var thisheight = $(document
iframe根据内容自动调整长度.
shiro558的专栏
06-14 1497
由于公司战略的需求,使用iframe(本人还是喜欢include),在使用中发现,随着页面数据的增多,iframe会出现下拉框,长度不够,但是设置足够长的长度时,当数据较少时,页面下方会出现空白域,在google搜索了很久,终于找到了一个代码,使iframe可以根据内容自动调整长度function f_frameStyleResize(targObj){ var targWin = targObj
内联框架：iframe跨域处理及高度计算
qq_42961150的博客
12-24 1321
iframe在web前端开发中很常见，iframe嵌入的页面与当前页面是在同一个域名下，是不存在跨域。但是在主域相同，子域不同的情况下，就会存在跨域，可以使用document.domain去解决。 iframe一般需要主动设置高度才会完全显示嵌入页面的内容，而内容可能会在迭代的时候变化，所以如果iframe的高度写死，那么就显得这个iframe不够智能。可以通过js去计算内容的高度，然后给iframe进行设置动态高度。
使用iframe嵌套，实现使iframe高度与iframe中内容高度一致。使iframe中的内容直接全部展示，不用滑动。
曦阳的博客
08-09 1685
前言 项目中遇到统计页面需要嵌套，但是在主页面又要展示数据的完整性——直接、全部、操作不冗余 在使用iframe中会因为其本身的性质失去 主页面要求的完整性。 一、解决 1.思路：在iframe标签上使用onload绑定方法，当iframe中内容加载完成后，通过js的方法将iframe的高度与iframe中内容的高度设置为一致。 onload具体讲解 2.代码： html： <iframe id="iframe" src="@{/newStatistics/statistics}" frameb
iframe自适应高度或自增
xingmyworld的专栏
09-29 1289
function getheight() { var Sys = {}; var ua = navigator.userAgent.toLowerCase(); if (window.ActiveXObject) Sys.ie = ua.match(/msie ([\d.]+)/)[1] else if (document.getBoxOb
iframe父页面随子页面高度的增加而增加
xyr05288的专栏
06-08 4596
问题：iframe嵌套网页，子页面高度增加，iframe高度也会增加.列如：子页面是一个表格数据。有个下拉框可以选择 回答： 1、首先你要明确：选择条数之后，触发了事件令子页面的body高度改变了，因此我们要捕捉到这个事件，即：$("body").resize(function(){}); 2、捕捉到事件后，我们要利用window.parent改变父页面的容器的高度。如：在父页面写个方法
iframe 多层嵌套 无限嵌套 高度自适应的解决方案
12-14
有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;}”> </ifra
JavaScript 处理Iframe自适应高度(同或不同域名下)
10-27
Iframe自适应高度一直都备受关注，接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应，感兴趣的朋友可以参考下哈
iframe高度随子页高度变化
05-15
iframe设置高度随子页高度的变化而变化 0分资源共享
Iframe 自适应高度并实时监控高度变化的js代码
10-29
不得不用到iframe，且被强烈要求不能让它出现滚动条！嵌入的页面肯定是高度不一的，页面中也不能出现大片空白，所以也不能写死高度！真是麻鬼烦啊！
js正则表达式的一些研究,截取两个字符串中间的字符串
热门推荐
zb219的专栏
05-09 2万+
一个最常用的场景 截取两上wp
关于inerHTML input value无效的问题
zb219的专栏
12-11 5713
原来在IE下面,手改文本框的值,innerHTML是可以体现出来的,但IE9,EI10,之后就不会体现了. 因为在标准模式下,  同  aa.value是不一样的,一个算是attributes属性,一个是表单元素的JS属性,这个在早期的IE是通用的,可是w3c是不通用的 你修改了aa.value 不代表你的aa.attributes["value"]也改了,而innerHTML 只能输出att
img onload事件
zb219的专栏
01-28 5025
看了网上一些代码都不成功 下面特写一段代码 首先，整一个地方把src存起来 再整一个图片对象，先写onload事件，再去赋src值。onload执行完后，再去赋值给img var headimg = new Image(); headimg.onload=function(){         var h = headimg.height;         var w = hea
iframe 自适应高度
最新发布
08-11
对于 iframe 的自适应高度，你可以使用以下方法： 1. 使用 JavaScript 动态调整 iframe 的高度：在父页面中，通过 JavaScript 获取 iframe 的内容高度，然后将这个高度应用到 iframe 的样式中。你可以使用以下代码： ```javascript // 获取 iframe 对象 var iframe = document.getElementById('your-iframe-id'); // 设置 iframe 的高度为内容的高度 iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px'; ``` 请确保在 iframe 内容完全加载后再执行此代码，否则可能无法正确获取内容高度。 2. 使用 CSS 中的 `aspect-ratio` 属性：如果你想要 iframe 的高度与宽度保持一定的比例，可以使用 CSS 中的 `aspect-ratio` 属性。这个属性可以用于设置元素的宽高比。例如，如果你希望 iframe 的宽高比为 16:9，可以使用以下代码： ```css iframe { aspect-ratio: 16/9; } ``` 这样，当父容器的宽度发生变化时，iframe 的高度会自动根据宽高比进行调整。 这些方法可以帮助你实现 iframe 的自适应高度。根据你的具体需求和情况，选择适合的方法来实现即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值