时间戳

首页 > 解决方案 > iframe body 上的 ResizeObserver 在 Chrome 和 Firefox 上的行为不同

javascript - iframe body 上的 ResizeObserver 在 Chrome 和 Firefox 上的行为不同

问题描述

我正在尝试使用 ResizeObserver 来监听文档正文高度的变化，从而调整包含它的 iframe 的大小。

一切似乎在 Chrome 上运行良好，但在 Firefox 上却不行，调整大小事件似乎不会以正确的方式触发观察者回调。

这是观察者代码，它会在每次内容大小更改时更新容器高度：

const iframeElement = document.getElementById("container");
const content = iframeElement.contentWindow.document.body;

const resizeObserver = new ResizeObserver(entries => {
    entries.forEach(entry => {
        iframeElement.style.height = `${entry.target.scrollHeight}px`;
    });
});
resizeObserver.observe(iframeContent);

这是一个简单的 JSFiddle，它清楚地显示了我在说什么：https ://jsfiddle.net/ujxkre85/ 。

包含的 iframe 应该适应其内容的高度，而这会增加。如您所见，它在 Chrome 上运行良好，但在 Firefox 上运行几乎没有任何反应。

有什么我没有得到关于 API 的东西，还是 Firefox 在这里遗漏了什么？

谢谢你。

标签： javascriptiframewebapimutation-observers

解决方案

Firefox 有一个在这里描述的错误https://bugzilla.mozilla.org/show_bug.cgi?id=1689099

观察 iframe 子文档中的元素（观察者在外部文档中注册）时，ResizeObserver 回调不会可靠地触发

所以可能使用 MutationObserver 是最好的选择。

推荐阅读