如何让iframe的高度自适应父窗口的高度

最新推荐文章于 2022-12-13 11:45:20 发布
最新推荐文章于 2022-12-13 11:45:20 发布
阅读量9.9k 收藏 3
点赞数 2
CC 4.0 BY-SA版权
分类专栏： html/jsp/servlet 文章标签： iframe javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/symgdwyh/article/details/7380574

给iframe添加属性onload="javascript:this.height=this.contentWindow.document.body.scrollHeight+30;"

如：

<Iframe src="<%= request.getContextPath() %>/listColumnAction.do" width="100%" style="_width: 100%;"
     height="100" scrolling="auto" frameborder="0" name="main" onload="javascript:this.height=this.contentWindow.document.body.scrollHeight+30;"></iframe>

让iframe自适应父容器高度
weixin_34356555的博客
08-20 1236
把下面一段js代码贴到子页面中即可生效<script type="text/javascript">//自动调整iframe框架的方法function iframeAuto(){try{if(window!=parent){//定位需要调整的frame框架（在父级窗口中查找）var a = parent.document.getElementsByTagName(...
实现iframe自适应高度的三种简易方法
最新发布
weixin_34268462的博客
07-10 372
同源策略是浏览器的一种安全机制，它阻止了Web页面对不同源的文档或脚本进行脚本访问。两个页面具有相同的协议（scheme）、主机（host）、端口（port）被认为是同源的。如果两个页面具有不同的源，则它们之间的一些交互就会受到限制。
关于iFrame高度小于父元素DIv3~5px的解决方案
weixin_33800593的博客
04-13 299
最近在使用iframe时候遇到一个不大不小的问题：用一个div包裹一个iframe，但无论如何，div的高度都比iframe高了4px。百思不得其解，后来在网上多方查找，才发现问题的根源所在。那么究竟是什么问题导致了这个情况的发生呢？没错，就是应为它；请看！当然有问题就要解决，解决的具体方案就是给iframe添加属性：vertical-align:bottom;或者display:block;原...
iframe怎么自适应付父窗口的高度
sutonline的博客
12-08 669
iframe怎么自适应付父窗口的高度使用下面的js：<script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } </script>然后在嵌入的时候使用:<iframe src="..." frameborder="0" s
iframe自适应父容器宽高
简乐君
01-14 6960
button
iframe窗口高度自适应的又一个巧妙实现思路
09-04
然而，当`iframe`内的页面内容发生变化时，如何实现`iframe`窗口高度的自适应是一个常见且重要的需求。`iframe`的滚动条不仅影响用户体验，也可能导致页面布局不协调。本篇文章将详细介绍一种巧妙的实现`iframe`窗口...
Iframe 高度自适应浏览器高度
03-28
这种技术常被用来实现...以上就是关于“Iframe高度自适应浏览器高度”的主要知识点，实践中可能需要结合具体场景和需求选择合适的方法。在实际应用中，还要考虑到兼容性问题，确保在不同浏览器和设备上都能正常工作。
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
总结来说，解决iframe跨域高度自适应问题的关键在于找到一种方式，无论子页面是否在同一域，都能让父页面获取到准确的高度信息。这可能需要结合JavaScript、HTML5特性、CSS布局或者服务器端的配合，具体选择哪种方法...
jsp页面iframe高度自适应的js代码
10-25
总结一下，实现JSP页面中IFrame高度自适应的关键步骤包括： 1. 在主页面中，获取当前页面的文档高度并将其添加到IFrame的`src`属性中。 2. 在IFrame加载的页面中，解析URL的`hash`部分获取高度参数。 3. 使用...
iframe高度自适应
01-04
### iframe高度自适应知识点详解 在网页开发过程中，经常会遇到需要将一个页面嵌入到另一个页面中的场景，这时就会用到`<iframe>`标签。然而，默认情况下，`<iframe>`的高度是固定的，当其内部内容发生变化时，可能...
iframe交互（一）父页面自动高度
weixin_30678349的博客
07-24 133
//父页面源码 <body style="border:1px solid red;width:200px;height:500px;" onload="IFrameResize()"> <script> function IFrameResize() { //alert(this.document.body...
iframe自适应高度（随内容高度变化）
weixin_50641294的博客
05-25 6455
由于需求需要把一个项目的页面嵌套到另外一个页面，但是iframe高度不能写死，所以要让iframe高度自适应 1.解决思路： 获取嵌套页面的高度，把高度赋值给父页面的iframe 代码实现 1.首先在嵌套页面获取父级ifram元素 let iframeDom = parent.parent.document.getElementById("iframe") 2.获取嵌套页面高度 let box = document.getElementById("box") 3.把页面高度复制给父级ifram iframe
自适应高度div内嵌iframe高度被撑开问题解决
jac.song的专栏
12-22 4660
div自适应的情况下，内部嵌入iframe，iframe边框什么的全部设置0，本以为外层div可以完美自适应，结果div在不同浏览器却硬是多出3-5个像素的高度。 找了下相关文章，发现确有此问题，有人说用负的margin值，可终究不完美，终极完美解决方案竟然是给iframe加display: block，或者vertical-align: bottom。
内嵌iframe撑高父容器，底部有4px留白问题解决办法
weixin_30889885的博客
02-25 420
由于iframe是特殊标签， 1，iframe默认是块元素,其display样式默认值是block2，frame应该说即不是块元素也不是行内元素,它虽然有display样式,但其默认值是none3，frameset不是块元素也不是行内元素,因为frameset不能出现在body之内,而且也没有display样式.4，frameset标签下只能使用frame标签而不能是iframe标签,ifra...
Vue 下 iframe可不固定高度、无视跨域窗口高度自适应
aj951225的博客
12-13 8362
Vue 下 iframe可不固定高度、无视跨域窗口高度自适应。原理：iframe设置高度100%，使用动态计算出iframe上一个父标签的高度，iframe高度就会自动撑开。限制是iframe只能在一个实时变化高度的窗口里面展示
在onload事件触发时，根据body的高度自适应iframe的高度
Class雷
03-25 931
在onload事件触发时，根据body的高度自适应iframe的高度 <div class="iframe-wrapper"> <iframe name="iframe1" onload="this.height=this.contentWindow.document.body.scrollHeig...
完美解决iframe的100%高度问题
热门推荐
skiof007的专栏
04-07 1万+
1.想让iframe的高度为100%,必须让其父标签的高度为100%，比如html、body都要100%才行。 2.如果iframe处在一个表格内，你会发现，只是设置html与body为100%还是不行的，即便是设置table为100%也是不行。在这种情况下，需要把页面头部的“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">”删除
iframe 内页面是自适应的 放到父页面后 显示不全
Karen_Kiss的博客
07-25 1268
下面是在寻找iframe适配方案中找到的别人写的一个方法或许有用但最后没用到，还是贴一下，说不定下次有用呢。这个适配问题折磨了我一天最后发现layui自己生成的iframe居然已经完美解决了这个适配问题。...
纯JavaScript实现iframe高度自适应技巧
3. 根据获取到的内容高度，动态更新iframe的`height`属性，或者使用`window.resizeTo`等方法来调整iframe窗口大小，使iframe高度与内容高度保持一致。 下面是一个简单的JavaScript函数示例，展示了如何获取iframe...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值