设置iframe高度随内容变动源码与解答

最新推荐文章于 2021-09-08 15:50:41 发布
最新推荐文章于 2021-09-08 15:50:41 发布
阅读量2.9k 收藏
点赞数
分类专栏： HTML 文章标签： iframe html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuejingjiahong/article/details/6650990
版权
  iframe高度随内容变动

<iframe id="mainFrame" src="result.jsp" frameborder="0" width="100%" height="100%" οnlοad="this.height=mainFrame.document.body.scrollHeight"></iframe>

 上面这句话，就实现了我们需要的效果!

这里主要注意的是2个地方：

1需要将iframe的frameborder设为0，不然还是有可能出现滚动条

2在onload事件中加入“this.height=mainFrame.document.body.scrollHeight”代码，这是为了让iframe的高度在html执行后来动态设置iframe的高度为内容的高度。

内容过长，有可能出现滚动条。。

源码分享爱好者：岳静

共同学习共同进步！

 

jimmy_小静
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe高度随子页高度变化
05-15
iframe设置高度随子页高度的变化而变化 0分资源共享
jQuery获取与设置iframe高度的方法
10-21
除了获取与设置iframe高度的方法外，本文还提到了jQuery的其他相关技巧与操作，比如操作iframe的技巧总结、jQuery的扩展技巧、常用的插件及用法、拖拽特效与技巧、表格操作技巧、Ajax用法、经典特效以及动画与特效的...
iframe高度根据内容变化
weixin_34367845的博客
10-15 214
我们在使用iframe的时候，iframe的高度并不会根据内容的多少来改变它的高度，如何让它根据内容来改变它的高度呢？在网上也找了好多代码，觉得下面这段代码是最有效的： 1 var browserVersion = window.navigator.userAgent.toUpperCase(); 2 var isOpera = browserVersion.indexOf("OPE...
iframe 的高度根据内容自动调整
旺仔专栏
11-29 2862
我们在做项目的时候如果用到了Ifram的话，可能会有一个很苦恼的问题，那就是 Ifram 的高度可以被页面撑大，但是撑大后就回不来了，那么，怎么让iframe 的高度自动根据iframe 里面页面的内容的高度来调整呢，很简单，只需将如下 js 代码 copy 到 Ifram 的 src 属性所指向的页面中就可以了。 function f_frameStyleResize
iframe的高度随内容的变化而变化
weixin_34343000的博客
06-18 581
下面详细介绍了iframe框架高度随内容的变化而变化的代码。大家根据自己的需要提取！ <iframe src="XXX.htm" width="700px" frameborder="0" id="frmsrc" scrolling="no" marginheight="0" onload="AutoIframe()"></iframe> <...
动态修改iframe高度，从而自适应内容真实高度
Cheney的博客
09-08 3719
项目中遇到这样的情况，需要用到iframe，iframe中的内容也是自己写的页面，由于页面中元素是异步加载出来的，并不能提前预知其高度，这样就不能设置iframe的高度，导致iframe会出现滚动条，用户体验不好。所以我需要能根据内容动态改变iframe的高度。 dom结构如下 <!-- iframe --> <iframe id="iframe" scrolling="no" src="./iframe/page"></iframe> <!-- ./ifr
iframe根据页面内容自适应高度和宽度
09-03
1. **CSS属性**：`iframe`的`style`属性可以设置`height`和`width`为`auto`或`100%`，但这种方法通常不足以实现完全自适应，因为浏览器的安全策略会限制跨域访问内容的高度和宽度信息。 2. **JavaScript**：使用...
JavaScript自动设置IFrame高度的小例子
10-27
JavaScript自动设置IFrame高度的示例代码涉及多个知识点。首先，我们知道IFrame是HTML中的一个内联框架，它可以用来在当前页面中嵌入另一个HTML页面。然而，一个常见的问题是IFrame的高度不是静态的，它需要根据所嵌...
javascript应用：Iframe自适应其加载的内容高度
10-30
3. **调整高度**：最后，通过JavaScript改变`<iframe>`的高度属性，使其与内容的高度一致。 #### 3. 代码实现详解 以下是实现该功能的具体代码示例，包括了主页面`main.htm`和子页面`child.htm`。 #### 3.1 主...
iframe 自适应高度，更改内容时iframe高度怎么根据新的内容高度自动改变
Elvis技术小屋
11-16 6718
//code from http://caibaojian.com/iframe-adjust-content-height.html function reinitIframe(){ var iframe = document.getElementById("test"); iframe.height = 0; //只有先设置原来的iframe高度为0，之前的iframe高度才不会对现在
根据iframe的内容，动态改变iframe的高度
zqq3436的博客
01-21 5127
//1.获取iframe var iframe = document.getElementById('mainFrame'); //2.获取iframe的body标签 var body = iframe.contentWindow.document.body; //3.获取iframe中body标签下的某个div的高度 var ght = $(body).find("#orgTree").hei...
真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
热门推荐
巴黎的妖
05-19 21万+
今天有朋友问到我关于“iframe自适应高度”的问题，原本以为是很简单的问题，没想到折腾了20分钟才搞定。期间遇到几个问题，要么是高度自适应了，但是当窗口改变时会出现滚动条。也就是当窗口放大时iframe没有自动跟随变大显得很小，或是当窗口缩小时iframe还是之前那么大就出现了滚动条。还有或是高度不准确，那么就达不到想要的效果了。 为什么需要使用iframe自适应高度呢？其实就是为
iframe 根据内容自适应高度-终极解决方案
不啦草的草原
07-05 6万+
第一中方法： 在子页面加载完毕的时候执行 parent.document.getElementById("iframe").height=0; parent.document.getElementById("iframe").height=document.body.scrollHeight; 第二中方法： 在主页面 iframe onLoad 时间里面写 functi
iframe自适应高度完美版解决DOM元素高度变化问题
cmm的专栏
10-16 9322
通常做后台的时候,都喜欢用框架,在用frameset的时候,把系统分为左右两块,或者上左右两块不会出现自动高的情况,如果使用了iframe,就要碰上iframe自动高的问题,这不,我现在就折腾上了,可把哥给累着了!        网上搜索”iframe自动高”会有很多的解决方案,我试了很多,但都存在问题,大多只解决了iframe加载完后的静态内容实现的自动高,iframe加载完后,对DOM操作,
有没有什么方法可以让IFRAME的高度随着里面的内容增加而自动增高
shysky的专栏
02-01 2878
http://bt.eyeah.cn/cache/lmovie/2415.html">>var collAll = document.frames("main").document.body;document.getElementById("main").height=collAll.scrollHeight;document.getElementById("main").width=coll
iframe根据内容自适应高度
qq_42413925的博客
06-08 1357
方法一：function IFrameReSize(iframename) { var pTar = iframename; if (pTar) { //ff if (pTar.contentDocument &amp;&amp; pTar.contentDocument.body.offsetHeight) { pTar.height =...
vue使用 iframe，iframe的高度随内容变化怎么做
最新发布
07-24
在Vue中使用iframe并使其高度随内容变化，可以通过以下步骤实现： 1. 首先，在Vue组件中定义一个变量来保存iframe的高度，例如`iframeHeight`。 2. 在父组件中加载iframe，并添加一个监听器来处理iframe的加载完成事件。在加载完成后，获取iframe的内容高度。 3. 在父组件中使用`postMessage()`方法将iframe的内容高度传递给子组件。 4. 在子组件中添加一个监听器来接收从父组件传递过来的iframe高度。 5. 在子组件中使用`watch`属性或者计算属性来监听iframe高度的变化，并将该高度应用到iframe的样式上。 下面是一个示例代码： ```vue <template> <div> <iframe ref="myIframe" src="your-iframe-src" @load="handleIframeLoad"></iframe> </div> </template> <script> export default { data() { return { iframeHeight: 0 }; }, methods: { handleIframeLoad() { const iframe = this.$refs.myIframe; const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; const iframeContentHeight = iframeDocument.body.scrollHeight; window.addEventListener("message", event => { if (event.data && event.data.type === "iframeHeight") { this.iframeHeight = event.data.height; } }); iframe.contentWindow.postMessage({ type: "getIframeHeight" }, "*"); } }, watch: { iframeHeight(newHeight) { this.$refs.myIframe.style.height = `${newHeight}px`; } } }; </script> ``` 在子组件中，我们监听`iframeHeight`变量的变化，并将新的高度应用到iframe的样式上。 在父组件中，我们使用`postMessage()`方法向子组件传递iframe的内容高度，并在子组件中接收该高度，并更新`iframeHeight`变量。 请注意，在加载完成后，我们使用`postMessage()`方法将消息发送到iframe中，以请求获取iframe的内容高度。为了避免安全问题，我们使用`"*"`来指定接收消息的窗口。你可以根据实际情况调整这些代码来适应你的项目需求。 希望对你有所帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值