亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

iframe怎么根據內容自適應高度

小億
278
2023-10-18 16:23:16
欄目: 編程語言

要根據內容自適應iframe的高度,可以使用以下方法:

  1. 使用JavaScript動態調整iframe的高度。
  • 在父頁面中,使用JavaScript獲取到iframe元素。

  • 監聽iframe的加載事件或者內容改變事件。

  • 在事件觸發時,使用JavaScript獲取到iframe內容的高度。

  • 將獲取到的高度賦值給iframe的height屬性。

示例代碼如下:

<script>
function resizeIframe() {
var iframe = document.getElementById("my-iframe");
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
window.addEventListener("load", resizeIframe);
window.addEventListener("resize", resizeIframe);
</script>
  1. 使用PostMessage進行跨域通信。
  • 在iframe的內容頁中,使用JavaScript獲取到內容的高度。

  • 使用PostMessage方法將高度信息發送給父頁面。

  • 在父頁面中,使用JavaScript監聽PostMessage事件,并根據接收到的高度信息動態調整iframe的高度。

示例代碼如下:

在iframe的內容頁中:

<script>
function sendHeight() {
var height = document.body.scrollHeight;
parent.postMessage(height, "*");
}
window.addEventListener("load", sendHeight);
window.addEventListener("resize", sendHeight);
</script>

在父頁面中:

<script>
window.addEventListener("message", function(event) {
if (event.origin !== "http://example.com") return; // 可選的安全驗證
var height = parseInt(event.data);
var iframe = document.getElementById("my-iframe");
iframe.style.height = height + "px";
});
</script>

以上是兩種常用的方法,可以根據具體情況選擇適合的方式實現iframe的自適應高度。

0
益阳市| 津市市| 闽侯县| 含山县| 黄冈市| 宁南县| 内江市| 惠安县| 乌兰县| 嘉禾县| 嘉定区| 元阳县| 静乐县| 江门市| 元江| 安平县| 乐陵市| 田阳县| 贵南县| 南城县| 涪陵区| 都江堰市| 新化县| 隆子县| 清远市| 三亚市| 贵阳市| 京山县| 洞头县| 饶阳县| 策勒县| 廉江市| 古交市| 安乡县| 专栏| 团风县| 托里县| 许昌市| 皮山县| 荥阳市| 仲巴县|