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

Question

我正在尝试使用 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 在这里缺少什么，我是否有什么不明白的地方？

谢谢你。

Answer 1

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

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

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