js设置iframe高度无效

最新推荐文章于 2024-05-14 18:54:35 发布
原创 最新推荐文章于 2024-05-14 18:54:35 发布 · 946 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #html5 #css

本文介绍了一种在CSS预设样式下使用JS动态调整iframe元素高度的方法。当直接修改高度无效时，可以通过移除CSS中的固定高度并在页面加载完成时通过JS设置高度来解决问题。 
iframe.content{
    width: 1000px;
    min-height: 1510px;
    margin-left: 25%;
    margin-top: -180px;
    background-color: rgb(255, 255, 255);
}

在css已经确定的情况下用以下js代码无法设置iframe的高度

function ifmin(){
       document.getElementById("cont").height=910+'px';
}

解决办法：

css中不设置iframe的高度，通过onload设置iframe的高度

function ifload(){
    document.getElementById("cont").height=1510+'px';
}
<body onload="ifload()">

js代码就能生效了

function ifmin(){
       document.getElementById("cont").height=910+'px';
}
Iframe自适应高度，Iframe高度问题解决
蕃薯耀的博客
03-10 4876
Iframe自适应高度，Iframe高度问题解决 ================================ ©Copyright 蕃薯耀2021-03-10 https://www.cnblogs.com/fanshuyao/ 一、Iframe自适应高度方法 /** * 父级页面获取子级页面的高度 给元素设置高度 * 在onload事件之后才生效，即第一次加载才生效，后面高度变化...
iframe跨域自适应高度模板
02-16
总结来说，`iframe`跨域自适应高度模板主要是通过`CORS`解决跨域限制，通过JavaScript监听`load`事件或使用`postMessage`通信来实现内容高度的动态调整。这些技术在现代网页开发中十分常见，能帮助我们更灵活地整合...
iframe高度塌陷，设置100%无效解决方案
前端~锋小张
08-31 1554
【代码】iframe高度塌陷，设置100%无效解决方案。
iframe标签设置高度百分比不生效，无法做成自适应问题
m0_64785232的博客
05-07 773
设置px的话在小屏幕可以正常显示，但是如果移到大屏还是600px,无法做到自适应。解决方法很简单，在style中设置iframe的高度。iframe标签设置高度百分比不生效，只能设置px，无法做成自适应问题。
iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题
06-03
Iframe自动根据类容改变自己的大小，解决Iframe设置高度后无法缩小！拜一个高人所赐，特表示感谢！
iframe设置height无效
weixin_30672295的博客
02-24 1754
iframe设置height为100%无效，实际是因为父空间高度没有设置的问题。 代码如下 <body> <iframe id="content" src="main.do" name="content" frameborder="0" scrolling="no" height="100%" width="100%"></iframe></bo...
iframe父级元素高度百分比不生效
最新发布
天高任鸟飞
05-14 670
将 iframe 的父级元素设置为相对定位，并将 iframe 设置为绝对定位。这样，iframe 就可以根据父级元素的高度百分比来设置其自身的高度。：使用 JavaScript 来动态设置 iframe 的高度，以匹配其父级元素的高度百分比。
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
09-05
为了避免这种情况，可以在`iframe`加载时将其高度设置为一个低于实际内容高度的值，例如`100`，然后再同步到正确的高度： ```html <iframe style="z-index: 1; visibility: inherit; width: 100%;" name="main...
html iframe高度的100%无效
06-01
如果您在使用 `<iframe>` 标签时设置了高度为 100%，但是发现它并没有生效，可能是因为它的父元素没有设置高度。在这种情况下，`<iframe>` 的高度将会自动调整以适应其内容的高度，而不是适应父元素的高度。 解决这...
JavaScript实现动态调整iframe高度的方法
### 知识点三：JavaScript在动态调整iframe高度中的作用 JavaScript是一种脚本语言，可以用来操作DOM（文档对象模型）中的元素。通过JavaScript，我们可以监听特定事件，获取iframe内部内容的高度，并动态地修改...
iframe引入的html页面高度,为什么iframe高度100％在XHTML页面中不起作用？
weixin_36376992的博客
06-04 314
参见英文答案 >Full-screen iframe with a height of 100%15个我正在玩一个嵌入第二页的iframe,只是在iframe上面显示一个短标题.在一个测试设置中,height =“100％”正常工作,在另一个设置中没有,然后I noticed that差异是iframe高度始终设置为约1...
关于iframe height 100%无效问题
CHOUFENGDDDDDD的博客
11-12 1962
iframe height 100%无效 两种解决方式 一：   设置父标签高度固定 例：height：100px;。 原因 ：iframe height：100% 只有在父亲标签高度确定的情况下才有效。   二：   在附标签高度确定的情况下 ，可以在js中编写函数获取父亲标签的高度值 height,将值赋值给iframe 设置iframe的固定高度。 例: &lt;td...
iframe 高度显示不正确解决方法 IE
hwm的专栏
03-27 1948
src="xxx"  style="width: 100%;heigth: 100%;">
iframe嵌套出现高度无法自适应，底部滑动出现白条
m0_53111653的博客
02-13 563
iframe嵌套出现高度无法自适应，底部滑动出现白条
HTML中：写iframe（浮动框架）时明明写了height（高度）的值但用浏览器实际测试发现高度却不变问题
UPStudy_HU的博客
12-01 455
HTML中：写iframe（浮动框架）时明明写了height（高度）的值但用浏览器实际测试发现高度却不变问题
iframe height 100% 无效问题解决（转）
热门推荐
smb1987cs的专栏
02-17 4万+
最近，利用 MapGuide 技术开发一个 WebGIS 的应用程序，其中用到了 标签；可是当我调试运行的时候，其 width=100% 生效了，但 height=100% 就无效，无论用 JavaScript 的方式修改还是直接设置其 height 属性为100%，始终只有 200px 左右的高度。折腾了我半天，再经过一番研究，终于找到答案了，结论如下：要使 标签的 height=100
iframe宽度高度的自适应的问题
Wisdom—Yoga—TaciturnKnight（WYT）
09-22 3185
iframe嵌套在div内 ，iframe的宽高都设置了100% ，可是还是无法自适应，解决方法如下： 代码：通过红色位置可以解决 function setIframeHeight(iframeId){       var cwin = document.getElementById(iframeId);        if (document.getElementById){
使用iframe引入文件后设置响应式宽高以及其他问题解决；
weixin_30873847的博客
06-01 189
第一 ：引入iframe后背景色解决： 需要先设置 被引入文件的body样式 第二：滚动以及其他样式需要设置，span是为了小屏准备的，处理小屏时候元素距离顶部高度问题； 这个是span 的样式 然后设置iframe 大屏需要固定显示，不占用空间，小屏需要占用50px高度 下一步需要设置小屏点击事件需要满足以下条件： 大屏不影响其它元素 小...
iframe的高度自适应
xiaozhuangyumaotao的博客
04-17 6634
现在有这样一个情景：a页面需用使用iframe嵌入b页面，而b页面的内容高度是不固定的，有可能是300px,有可能是500px......，这时候我要求在a页面嵌入b页面的区域不能有垂直滚动条，怎么实现呢？很显然，因为被嵌入的b页面高度是不确定的，我们在使用iframe的时候就不能固定iframe这个元素的高度，而是应该写为100%。好，下面我还是用最简单的例子来验证如何完美的解决iframe高度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值