<!DOCTYPE html>
<html>
<head>
<title>iframe 自適應大小</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
$('iframe').on('load', function(){
$(this).height( $(this).contents().find('body').height() );
});
});
</script>
</head>
<body>
<iframe src="http://www.example.com" frameborder="0"></iframe>
</body>
</html>iFrame 是在 HTML 文檔中嵌入其他 HTML 文檔的方法。iFrame 可以類比于在現實生活中的一個窗口（或者盒子），可以在原本的文檔中嵌入另一個文檔。在 Web 開發中，由于不同網站之間的標準不同，需要在網站之間共享資源或信息，這時候 iFrame 就可以派上用場了。
然而，當我們在iframe中嵌入其他網頁時，可能會出現內嵌網頁的高度超出了iframe自身的高度，從而出現了滾動條。這就不利于用戶的閱讀和體驗。解決這個問題的方法是通過 iframe resize jquery 實現 iframe 自適應大小。
以下是一個簡單的 jQuery 代碼樣例。這段代碼會在 iFrame 加載完成后，獲取 iFrame 內容的高度，并將其設置為 iFrame 的高度。
<script>
$(function() {
$('iframe').on('load', function(){
$(this).height( $(this).contents().find('body').height() );
});
});
</script>使用此代碼示例，您可以從內嵌網頁中獲取高度，并將其設置為 iFrame 的高度，使得內嵌網頁與外層 iFrame 完美適應，提升用戶的閱讀體驗。