Iframe自适应页面高度问题的最简单最适用的解决办法

最新推荐文章于 2021-06-25 11:56:23 发布
最新推荐文章于 2021-06-25 11:56:23 发布
阅读量2.1k 收藏 3
点赞数 1
文章标签： iframe javascript server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Simonzy/article/details/492094
版权

    虽然网上类似的解决办法很多，但使用起来都不是很方便，通过自己的实践总结，得出以下的代码，以和大家分享。

<iframe id="iframeName" name="iframeName" runat="server" src="ShowMsg.aspx" width="710" height="100%" scrolling="no"    frameborder="0" align="left" οnlοad="javascript:this.style.height=document.all.iframeName.contentWindow.document.forms(0).offsetHeight;"></iframe>

Simonzy
关注
iframe自动适应高度（完美自适应高度嵌套代码），兼容目前主流浏览器。
08-12
iframe自动适应高度，很难得的资源，很多下载的都是部分浏览器可以用，这个可以兼容360.ie6789等，遨游，火狐。搜狗等浏览器。。亲自测试。
JQuery IFrame框架高度自适应（支持嵌套–兼容IE,ff,safafi,chrome）
04-13
NULL 博文链接：https://z-one.iteye.com/blog/1725511
iframe子页面适应高度
fengxing_2的专栏
05-24 598
/** * 根据子页面高度调整iframe高度 * @param id id：iframe id */function resizeiFrameHeights(id) { var ifm = document.getElementById(id); ifm.height = 0; var subWeb = document.frames ? document.frames[id].document...
iframe嵌套界面自适应，可高度自由收缩
AIZIYOU1111的博客
07-02 400
点击打开链接
html iframe 自适应高度宽度,给iframe设置尺寸自适应为什么高度那么怪？？
weixin_39829307的博客
06-25 246
$(document).ready(function(){$("#aaa").load(function(){//$(this).width(0); //用于每次刷新时控制IFRAME宽度初始化// $(this).height(0); //用于每次刷新时控制IFRAME高度初始化var width = $(this).contents().find("#con").width() ;var he...
[转]目前找到的最好的Iframe自适应高度代码
10-31
在【标题】和【描述】中提到的代码，就是一种解决Iframe自适应高度问题的方法，它适用于多种浏览器，包括IE5.5、IE6.0、Firefox1.x以及Opera9.01。 首先，让我们深入理解这段代码的工作原理： 1. **Iframe的基本...
掌握iframe自适应高度的简易解决技术
针对上述问题，有几种实现iframe自适应高度的简单方法： ### 方法一：纯CSS实现（仅适用于静态内容） 通过CSS伪类选择器`:empty`和`::after`，可以为iframe提供一种简单的自适应方案。当iframe内没有内容时（即...
iframe src为图片时的高度自适应的代码
10-30
### iframe src为图片时的高度...通过上述方法，可以有效地解决iframe src为图片时的高度自适应问题。这种方法不仅简单易懂，而且具有很好的兼容性。对于需要在网页中嵌入图片的场景来说，是一种非常实用的技术手段。
iframe自适应高度
08-06
### iframe自适应高度详解 #### 一、引言 在网页设计与开发中，`iframe`（Inline Frame）被广泛用于嵌入其他网页或者显示来自不同源的内容。它能够实现网页内部局部数据的实时更新而无需整个页面刷新，极大地提高...
iframe自适应宽度、高度 ie6 7 8，firefox 3.86下测试通过
12-11
总的来说，这段代码提供了一种跨浏览器的`iframe`自适应宽度和高度的解决方案，尤其适用于那些需要在旧版本IE浏览器和Firefox中保持兼容性的场景。不过，随着现代浏览器的普及，现在可以利用CSS3的`object-fit`属性...
Iframe 框架自适应被嵌入页面高度
02-20
js控制 Iframe 框架自适应被嵌入页面高度
页面中自适应iframe高度的问题总结
fisher
05-21 2968
当需要对iframe进行操作，例如获取iframe的高度等，iframe和当前页面需要时同域，跨域情况下是获取不到的； 当动态设置iframe的高度时，iframe的高度一旦变大是不会自动缩小的。 例如： iframe中 a 页面高度为800px，b 页面的高度为500px ，你获取到的iframe高度只会是 800px 反之，a 为 500px，b 为800px，那么从 a 跳转到 b ...
BODY background=自适应大小_postMessage iframe跨域解决高度自适应
weixin_39776991的博客
11-23 170
今天学习一个新的window方法：window.postMessage。window.postMessage() 方法可以安全地实现跨源通信。postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.之前的一篇iframe高度...
【原】 iFrame 自适应高度解决不了的问题所在和解决办法
活在当下 乐在其中
01-05 745
最近,模仿一个软件的时候,发现iframe的高度和宽度不能随内容而自动调节,除非指定iframe 的宽度和高度为具体的值;问了很多朋友也都不知道.很是伤脑筋啊!后来,在W3SCHOOL中的"HTML 标签"一节中看到这么一句话:在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素.我再看看自己写的页面,但是transitiona
让嵌入的iframe完美自适应宽度、高度
ITSM/ITIL/网络安全/IT运维
10-14 9510
涉及到系统集成的时候，前端我们经常会用到iframe嵌入，但是嵌入的时候经常有不适应的情况，太长或太宽、滚动条。。。 下面的方法可以做到使嵌入的iframe自适应宽度、高度， 1、嵌入iframe，加入onload事件 <iframe id="bi_iframe" src="http://xx.xx.xx.xx/yourServicePath&para1=xxx" onload="adjustIframe();" frameborder="0" scrol...
iframe高度宽度自适应（转）
weixin_34200628的博客
05-27 292
 http://www.cnblogs.com/snandy/p/3900016.html 跨子域的iframe高度自适应 完全跨域的iframe高度自适应   同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或document属性访问到文档对象，进而可以取得页面的高度，通过此高度值赋值给iframe tag。 2. 子页面可以通过pa...
实现iframe的100%高度和宽度
gaoming918的专栏
04-09 562
body { margin: 0; /* Reset default margin */ } iframe { display: block; /* iframes are inline by default */ background: #000; border: none; /* Reset default border */ height: 100vh; /* Viewport-relative units */ width: 100vw; } <iframe></ifram...
iframe高度宽度自适应
weixin_30929011的博客
04-11 1052
iframe高度宽度自适应 iframe { width: 100%; height: 100%; border: none; position: inherit; } 网上全是js方法，而且略显臃肿，故找到了一个css方法，宽高100%，继承定位 posted on 201...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值