首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

iframe的动态高度

在网页开发中,iframe 是一种常用的嵌入其他网页的方式。iframe 的动态高度指的是根据内部网页内容的高度自动调整 iframe 的高度。

要实现 iframe 的动态高度,可以使用 JavaScript 来动态获取内部网页的高度,并设置 iframe 的高度。具体实现方法如下:

  1. 在外部网页中插入 iframe,并设置一个 ID,例如:
代码语言:html<iframe id="myIframe" src="inner.html" frameborder="0"></iframe>
复制
  1. 在外部网页中插入 JavaScript 代码,用于获取内部网页的高度并设置 iframe 的高度:
代码语言:html<script>
复制
  function setIframeHeight() {
    var iframe = document.getElementById('myIframe');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    iframe.style.height = innerDoc.documentElement.scrollHeight + 'px';
  }
</script>
  1. 在内部网页中插入 JavaScript 代码,用于在内部网页加载完成后通知外部网页调整 iframe 的高度:
代码语言:html<script>
复制
  window.onload = function() {
    window.parent.setIframeHeight();
  }
</script>

通过以上方法,可以实现 iframe 的动态高度。需要注意的是,由于浏览器的安全策略,如果外部网页和内部网页的域名不同,则无法通过上述方法获取内部网页的高度。在这种情况下,需要使用更加复杂的跨域通信技术来实现 iframe 的动态高度。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

动态 iframe 内容高度自适应

使用iframe加载其他页面的时候,需要自适应iframe高度 这里加载了两个不同内容高度页面至iframe中 1....在onload事件触发时,根据body高度自适应iframe高度 <iframe name="iframe1...其实就类似与下方 name值对应iframe2,两种引用方式是等价 ?...可以发现,高度虽然能自适应,不过只支持高度了“从小到大”自适应 如iframe2内容比iframe1高,后者动态加载出前者能自适应,但前者动态加载出后者就不行了,这种高度减小不了 最后解决办法是...在onload事件中动态设置高度为body高度之前,先将原高度还原为auto或空值 可以用setTimeout(fn,0)将高度设置放到下一轮事件循环中执行,或者在 onbeforeunload 事件中先把高度设置为

6.5K51

iframe高度自适应_div自适应高度

我翻了前面的几十条,刨去大量转载,有那么三五篇是原创。而这几篇原创里面,基本上只谈到如何自适应静东西,就是没有考虑到JS操作DOM之后,如何做动态同步问题。...如果iframe始终调用同一个固定高度页面,我们直接写死iframe高度就可以了。...而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页实际高度了。...+ “, dHeight:” + dHeight); } 被加载页面,可以切换一个绝对定位层,来使页面高度动态改变。...可以归纳为,当iframe窗体高度高于文档实际高度时候,高度是窗体高度,而当窗体高度低于实际文档高度时,取是文档实际高度。因此,要想办法在同步高度之前把高度设置到一个比实际文档低值。

6.5K40

iframe自适应高度

内容高度 function reinitIframe() { var iframe = document.getElementById("content_iframe...,并iframe自适应内容高度 <button onclick="getData('iframeH');"...全部内容高度(如果垂直有滚动条,也显示全部内容高度)           document.body.offsetWidth  可见区域内容宽度(含边框,如果水平有滚动条,不显示全部内容宽度...)           document.body.offsetHeight 全部内容高度(如果垂直有滚动条,也显示全部内容高度)           document.body.scrollWidth... 内容宽度(含边框,如果有滚动则是包含整个页面的内容宽度,即拖动滚动条后看到所有内容)           document.body.scrollHeight 全部内容高度 (adsbygoogle

2.1K20

adminLte解决iframe高度问题

,只会刷新frame窗口,但是有一个问题就是frame默认高度只有一丁点,百度之后用了自适应也会有各种问题,比如高度只能拉伸不会缩短,在解决道路上真的是没有一个完美的解决方案,经过自己研究,发现一个非常简单方法...,那就是用js获取windowinnerHeight,代码实现window.innerHeight,然后出去顶部状态栏,以及空白部分,经过测试,窗口高度减去90是最合适,也可以根据你自己情况加减...-- Main content --> <iframe id="menuFrame" name...,无法动态改变。...解决方案:js监听每次frame地址变化后重新计算改变高度 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/164544.html原文链接:https://javaforall.cn

85730

解决iframe高度自适应

解决iframe高度自适应 原因 第一种方法 第二种方法 原因 iframe高度不会随着页面高度变化而变化,可能会导致页面显示不全,或者页面下方有空白问题。...第一种方法 这个方式更适用于嵌套页面,当嵌套多个iframe时,比如左侧有个侧边栏,右侧是个大iframe,这个大iframe又嵌套了一层:中间是iframe,但是右侧又有个侧边栏,这时候不想让iframe...//pre_height用于记录上次检查时body高度 //mainheight用于获取本次检查时body高度,并赋予iframe高度 var mainheight, pre_height; var...,并且iframe可以自己滑动,只在页面高度变化时重新赋值即可。...--src是动态赋值--> js代码: //根据ID获取iframe对象 var org = $("#form-iframe") org.onload = function () {

2.2K40

iframe 自适应高度多种实现方式

大家好,又见面了,我是你们朋友全栈君。 iframe高度自适应内容 需求:实现 iframe 自适应高度,能够随着页面的长度自动适应以免除页面和 iframe 同时出现滚动条现象。...一、iframe内容未知,高度可预测 这个时候,我们可以给它添加一个默认cssmin-height值,然后同时使用JavaScript改变高度。...二、多个iframe情况下 //输入你希望根据页面高度自动调整高度iframe名称列表 //用逗号把每个iframeID分隔....自适应高度 跨域时候,由于js同源策略,父页面内js不能获取到iframe页面的高度。...我们使用www.a.com下另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素高度

6K30

iframe自适应高度_html页面自适应

大家好,又见面了,我是你们朋友全栈君。 为什么需要使用iframe自适应高度呢?...在页面中通过iframe嵌入了另外一个页面后,如何使得页面的这块区域随着iframe高度自动适应而不会出现蹩脚上下左右滚动条呢?...下面这个办法就是使用javascript实现iframe高度自适应,这个可是兼容所有浏览器,ie,firefox,chrome,opera,safari这些浏览器都能够实现iframe高度自适应,...(设置id=phpernoteiframe高度自适应iframe里面的内容高度): style=”border:0px;background:#FFF;max-height:245px; ” scrolling...属性,这篇文章也依然教大家iframe自适应高度解决办法,希望两篇文章让你对iframe标签有一个更深入了解。

3.7K20

网站引入iframe视频,如何实现高度自适应?

我想很多小伙伴在写博客时候都能遇到一个令人头疼问题,某一篇文章想用 iframe 引入一个外链视频,但是大小总是有问题,宽度可以固定到 100% ,但是高度比如用实际高度来表示,比如 100px,...但是问题来了,在不同页面宽度下,视频高度是一致,就会导致一个很麻烦问题, 看下面两个图, pc端 移动端 很明显,在pc端正常显示视频,放到移动端高度就错位了,很不美观。...$('iframe').wrap('') 在css文件底部加上: .iframe{ position: relative; padding-bottom...: 56.25%; height: 0; overflow: hidden; } .iframe iframe { position: absolute; top: 0; left:...0; width: 100%; height: 100%; } 这个时候再访问带有 iframe 视频网页,不管宽度如何变化,高度可以随视频自适应。

2K10

如何实现iframe(嵌入式帧)自适应高度

好几次看到有人提问问到如何实现 iframe 自适应高度,能够随着页面的长度自动适应以免除页面和 iframe 同时出现滚动条现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数...不敢独享,大家要是觉得有用,欢迎使用 源代码如下  //** iframe自动适应页面 **//  //输入你希望根据页面高度自动调整高度...iframe名称列表  //用逗号把每个iframeID分隔....//定义iframeID  var iframeids=["test"]  //如果用户浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏  var iframehide...iframe浏览器显示问题    if ((document.all || document.getElementById) && iframehide=="no")    {     var

1.1K20

不使用定时器实现iframe自适应高度

… 把调整iframe高度方法暴露给第三方开发者,显示不大合适。...自适应高度问题,比较理想办法是: iframeonload前使用定时器修改iframe高度,在onload后清除定时器,然后监听iframedocumentDOMSubtreeModified...而监听DOMSubtreeModified事件主要作用是为了省去在iframe内修改dom时,每一次都要主动调用一次修改iframe高度方法。...这样就让iframe开发者,只需要专注自身页面的逻辑结构,不用再考虑每修改dom之处都要调用修改iframe高度方法。...注明:文章标题是不使用定时器,而上面我提到定时器,主要是担心iframedomready与onload那段时间内,iframe高度看上去会很怪异(实际开发中这一段时间有多长,影响有多大,到底要不要加定时器

2.2K20
领券