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)


评论

《 “Iframe 跨域高度自适应” 》 有 2 条评论

  1. 好久没用 iframe了,感觉是上一个时代的功能。现在都用vue这种框架,能div刷新区域了

    1. 对的,做局部刷新体验肯定比iframe舒服,主要是需要的内容是用blazor写的,无法跨域获得,等改改写个json接口好了,blazor还有好多东西不是很完善

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注