Iframe 跨域高度自适应

在页面中嵌入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高度自适应啦。

实例：链接&关于 – 云烟成雨 (shiyu.dev)