在页面中嵌入iframe子页面是很常用的方法，例如本站中的友情链接和朋友圈是嵌入的moments.shiyu.dev的页面，但是嵌入后的高度自适应问题就比较麻烦。
一开始想直接在iframe加载完成后读取子页面的doc中body的高度，结果发现有跨域问题，无法获得子页面的具体信息，后面在网上寻找各种解决方案，有很多是没有用的，甚至直接没考虑跨域的，最后找到一种方便而且使用的方法：子页面发送消息给父页面，父页面监听消息。
现在假设父页面（A.html）的代码如下：
<iframe id="friends-frame" loading="lazy" src="https://moments.shiyu.dev/friends" name="moments" width="100%" onload="friendsFinish()" style="border: none;">
</iframe>
<script>
const friendsFinish = function () {
window.addEventListener('message', function (event) {
var iframe = document.getElementById("friends-frame")
iframe.style.height = event.data + 100 + "px";
})
}
</script>父页面存在一个iframe标签加载https://moments.shiyu.dev/friends 这个子页面，而且父子页面不在同一个域上，所以父页面在加载完成iframe后创建事件监听，监听子页面发来的消息(高度)。
子页面(B.html)的代码如下：
<div>
********
</div>
<script>
function friendsOnload(target) {
let h = document.body.scrollHeight;
parent.postMessage(h, target);
}
</script>B页面加载后执行friendsOnload函数，传入target(父页面的域) 发送当前页面的高度。
这样就完成了不同域下iframe高度自适应啦。
