iframe 主体上的 ResizeObserver 在 Chrome 和 Firefox 上的行为不同

Question

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

在 Chrome 上一切似乎都工作正常，但在 Firefox 上则不然，其中调整大小事件似乎没有以正确的方式触发观察者回调。

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

const iframeElement = document.getElementById("container");
const iframeContent = 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 在这里遗漏了一些东西？

谢谢你。

Answer 1

Firefox 有一个错误，如下所述 https://bugzilla.mozilla.org/show_bug.cgi?id=1689099

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

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