根據內容高度調整iframe 的大小
使用iframe 顯示其他域的內容時，調整其高度以適應內容可以由於同源策略而成為一個挑戰。此策略限制不同網域上的頁面之間的 JavaScript 通訊。
解決方案：
要克服此限制，需要採用多步驟方法，涉及 iframe 內容和框架頁面。
1.跨域通訊：
由於 iframe 內容和框架頁位於不同網域，因此無法直接通訊。但是，可以使用另一個 iframe 來建立「管道」機制。
2.高度計算和訊息傳遞：
當iframe 內容載入時，它會計算其高度，並將框架頁面上隱藏iframe 的來源設定到同一網域上的說明頁面，並將計算出的高度傳遞給作為URL 中的參數。
3.輔助頁和父框架調整大小：
同一域上的輔助頁從iframe 內容接收高度並將其傳遞給父框架，然後父框架可以相應地調整iframe 的大小。
代碼：
框架頁：
<script type="text/javascript">
function resizeIframe(height) {
document.getElementById('myIframe').height = height + 60;
}
</script>
<iframe>Iframe內容：
<script type="text/javascript">
function setIframeHeight() {
var height = document.body.scrollHeight;
document.getElementById('iframeResizer').src = 'helper.com?height=' + height;
}
</script>
<iframe>幫助程式頁面：
<script type="text/javascript">
function resizeParentIframe() {
var height = getParam('height');
parent.parent.resizeIframe(height);
}
function getParam(name) {
var regex = new RegExp("[\?&]" + name + "=([^&#]*)");
var results = regex.exec(window.location.href);
return results ? results[1] : "";
}
</script>注意：
此解決方案假設同源策略允許iframe 內容和幫助程式頁面之間的JavaScript 通訊。如果不是這種情況，可能需要採取額外措施。
以上是如何跨域根據內容高度動態調整 Iframe 大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
