iframe嵌入其他项目页面，iframe实现自适应高度
项目上面遇到html页面中使用iframe嵌入另一个项目的vue页面，vue页面没有限制高度，vue页面的高度会随着内容的变化而变化，而iframe的高度不会变化，这样就形成了一个滚动条。
现在要求是iframe不能存在滚动条
思路
子页面（vue）调用父页面（html）默认的方法postMessage()，父页面通过postMessage()改变iframe的高度
实现
子页面vue
因为子页面的高度会变化，所有要监听页面的变化来多次调用postMessage()方法来传递子页面的高度
// 在子页面最外层绑定自定义指令v-resize
<template>
<div id="iframe" v-resize="resize">
xxxxxxxx
</div>
</template>
// 使用局部注册指令的方式
directives: {
resize: { // 指令的名称
bind (el, binding) { // el为绑定的元素，binding为绑定给指令的对象
let width = ''; let height = ''
function isReize () {
const style = document.defaultView.getComputedStyle(el)
if (width !== style.width || height !== style.height) {
binding.value() // 关键
}
width = style.width
height = style.height
}
el.__vueSetInterval__ = setInterval(isReize, 300)
},
unbind (el) {
clearInterval(el.__vueSetInterval__)
}
}
},
methods: {
// 自定义指令的方法
resize () {
var hashH = document.documentElement.scrollHeight // 获取自身高度
// 获取最外层div的高度
var heightId = document.getElementById('iframe').scrollHeight
console.log(hashH, 'hashH', heightId)
// 全局下的parent其实是父页面的对象，所以调用postMessage()调用的也就是父级页面的方法，
window.parent.postMessage([hashH, heightId], '*')
},
}
父页面
<body>
<div class="section">
<div style="height: 100px; background-color: aliceblue;">xxxxxx</div>
<iframe
id="ifrma1"
name="ifrma1"
width="100%"
height="300px"
src="http://192.168.83.15:8003/jetable/theme"
@load.once="IFload"
></iframe>
<script>
$(function() {
window.addEventListener('message', function(event) {
if (event.origin === "http://192.168.83.15:8003") {
// 如果高度还是有问题，可以再多加几百的高度给iframe
(document.getElementById("ifrma1")).style.height = event.data[1] + "px"
}
})
})
</script>
</body>
想要了解自定义指令v-resize的解析，可以看下篇监听div高度宽度的变化-自定义指令
