使用不同来源时 iframe 调整大小会导致闪烁

Question

我需要关于如何避免 iframe 在调整大小时闪烁的建议。 当 iframe 悬停时，我想在 iframe 中显示气泡组件。要显示气泡组件，我需要调整 iframe 容器的大小。

iframe 源代码是使用 react 框架构建的。因此，要将状态更改从 iframe 组件传递到父窗口，我这样做是这样的：

const onMouseOver = useCallback(() => {
  window.parent.postMessage({ isBubble: true });
}, [])

在父窗口中，我正在听这样的状态变化：

// append iframe to parent window body
var iframe = document.createElement('iframe');
iframe.src = <source to my react web app>
iframe.style.width = '20px';
iframe.style.height = '20px';
document.body.appendChild(iframe);

// listen to message
window.addEventListener('message', resizeIframe)

//resize iframe method
function resizeIframe(e) {
 var data = e.data

 // change iframe size 
 if (data.isBubble) {
  iframe.style.width = '100px';
  iframe.style.height = '100px';
 }
}

起初，我认为闪烁的问题是因为 iframe 没有正确加载。

我已经尝试了how to fix chrome flicker on iframe page reload 中提到的所有解决方案。但这些都不起作用。

我怀疑只有在调整大小时才会出现闪烁问题，因为当我使用静态 iframe 大小时，气泡组件会正确弹出而没有任何问题。

编辑：我发现当我将 iframe 指向不同的来源时会发生闪烁问题。示例<iframe src="https://different origin"></iframe> 但如果它使用相同的来源，工作正常

Answer 1

你可以试试这个库

iframe-resizer-react

你可以在这里找到它：https://www.npmjs.com/package/iframe-resizer-react

它应该有助于解决您面临的问题

希望这会有所帮助！