好久没写博客了，前一段时间都在准备面试相关的，最近换工作了，加上住进了自己买的小房子，各种事情，还是比较忙的。
我们来言归正传：
需求：最近在写一个博客的功能模块，技术栈是单独选择的vuepress，完成后想要融合到一个vue工程里，考虑到后期维护的问题，就通过iframe将vuepress打包后的工程页面引入到vue工程的一个页面中，这样iframe的父子级页面之间也要进行信息的传递，比如说传递iframe的子页面的滚动高度给父页面，然后撑开页面高度。
1.iframe的初始高度问题
vue工程的一个组件，也就是iframe的父页面，引入html；这里出现第一个坑，就是iframe的初始高度一定要设置，具体高度值可以预估一下iframe子页面的高度，否则加载的时候就会出现闪屏的现象，体验不好；如果iframe的子页面高度是变化的，也就是说iframe要实现高度的自适应，接下往下看。。。
<div id="iframeBox">
<iframe id="iframeCon" src="./blog/index.html" width="100%" height="800px"></iframe>
</div>2.postMessage的实现
上面说到iframe要实现高度自适应，就需要借助postMessage来实现了，自己之前没用过这个，找了很多资料说的感觉都不是很好，就自己直接写了。
在iframe的子页面中：函数写在methods中，怎么去触发getScrollHeight()这个函数看你具体的情况。注意一下，postMessage的源路径，想要将信息传递到哪里。
为什么要写定时器？如果页面内容超多，高度值很大，像我的就到了2W多px，需要等到页面加载完成后才能获取滚动高度，延时短了什么的是不能够获取准确的高度值，会造成iframe的父级页面出现双滚动条，影响体验。
最后，在页面销毁之前记得要清除定时器。个人感觉如果只有一个定时器，或者这个setTimeout不是为了实现setInterval的效果，也没有其他的掺杂，是不用清除的。
beforeDestroy() {
clearTimeout(this.timer);
},
methods: {
getScrollHeight() {
this.timer = setTimeout(() => {
et height = document.body.scrollHeight;
window.parent.postMessage(height, "/");
}, 100);
}
}在iframe的父级页面中如何接收信息呢？ 这里采用事件的监听，每次有子页面传递信息的出现，我们就获取到传递信息中的高度值，然后设置给当前页面。同样的记得移除监听。
created () {
window.addEventListener('message', this.setHeightUpdate, false)
},
destroyed () {
window.removeEventListener('message', this.setHeightUpdate, false)
},
methods: {
setHeightUpdate () {
let iframe = document.getElementById('iframeCon')
iframe.height = event.data + 100 // 这里的event就是子页面传过来的信息，可以打印到控制台看
window.scrollTo(0, 0) // 为了回到顶部
}
}我遇到的就是这些了，虽然简单，但是知识呀。。。
