javascript - 当 iframe 的内容发生变化时，如何调整 iframe 的高度？

Question

我想在内容更改时(当有人单击 iframe 上的链接时)调整 iframe 的高度，而不进行滚动。这意味着 iframe 应采用页面上所需的高度。

我尝试使用函数onLoad，但它仅在首次加载 iframe 时(而不是当我单击 iframe 内的内部链接时)起作用。

嵌入在 iframe 中的网站是在 React 中的(这是一个问题吗？)。 iframe嵌入到不同的域名中(我使用Django CSP进行了授权)。

你知道怎么做吗？非常感谢!

<iframe src="https://www.example.com" width="100%" height="200px" id="iframe" marginheight="0" frameborder="0" onload="autoResize('iframe');" ></iframe>

<script language="JavaScript">
function autoResize(id){

    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}

</script>

Answer 1

我曾经遇到过类似的问题。 iframe 没有自动调整其高度的功能。您需要在主页 (window.onmessage) 和嵌入页面 (parent.postMessage) 之间实现高度更改的手动通信形式。我用的教程是Medium: How to Automatically Resize an iframe我对此非常满意。