iframe标签嵌套页面时,如何让页面内的高度自适应
Posted 水香木鱼ゆ
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iframe标签嵌套页面时,如何让页面内的高度自适应相关的知识,希望对你有一定的参考价值。
哈喽小伙伴们,我们在写需求的同时,会经常用到
iframe嵌入其他的子系统页面
,其中最最关键的就是 iframe 的 页面高度自适应
。往往前期的时候,我们没有注意,等注意到的时候 手忙脚乱的。
今天, 木鱼带大家
快速的解决iframe 高度适配
的问题。一👇👇👇
由于工作的保密性质,效果图 ,就不能附加了。各位可以亲自尝试,有不明白的地方,请在下方留言。
<template>
<!--v-bind:src="contents" 为动态绑定的地址-->
<iframe width="100%" id="content" v-bind:src="contents" scrolling="no" name="content"></iframe>
</template>
<script>
import getIndicate from '../../api/home/home'
export default
data()
return
contents: '' // 用于iframe src
,
created()
this.acceptancePlatform()
,
methods:
acceptancePlatform()
//封装的接口
getIndicate()
.then(res =>
this.contents =
'https://1XX.XX.XXX.XXX:XXXX/data_notes/program_table?token=' + res
//调用高度适配
this.adaptiveIframe()
)
.catch(() => )
,
// iframe 高度适配
adaptiveIframe()
//当前iframe 的ID
var iframes= document.getElementById("content");
var adaptiveWeb = document.frames?document.frames["content"].document:iframes.contentDocument;
if(iframes!= null && adaptiveWeb != null)
iframes.height = adaptiveWeb .body.scrollHeight;
//调整合适的高度位置,即可在不同的分辨率中去自动适配
if(iframes.height<1380)
iframes.height=1380;
</script>
以上是关于iframe标签嵌套页面时,如何让页面内的高度自适应的主要内容,如果未能解决你的问题,请参考以下文章
layui弹窗 iframe嵌套页面内的弹窗如何覆盖到父级页面