資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在HTML中調整iframe的寬度和高度以適應其內容？
我們可以使用 CSS 設定尺寸來調整 iframe 的寬度和高度。這可以透過將寬度和高度屬性設定為特定值或父容器的百分比來完成。此外，我們可以使用 JavaScript 根據 iframe 內的內容動態調整尺寸。“iframe”是“Inline frame”（內聯框架）的縮寫。
以下是幾種可能的方法：
使用 JavaScript
您可以使用 JavaScript 調整 iframe 的寬度和高度以適應其內容。這可以透過獲取 iframe 元素，然後將其寬度和高度屬性設定為內部內容的值來完成。
<iframe id="myiframe" src="http://example.com"></iframe>
<script>
var iframe = document.getElementById("myiframe");
iframe.width = iframe.contentWindow.document.body.scrollWidth;
iframe.height = iframe.contentWindow.document.body.scrollHeight;
</script>
使用 CSS
您也可以使用 CSS 調整 iframe 的寬度和高度以適應其內容。這可以透過將 iframe 的寬度和高度屬性設定為 100%，然後使用 padding-bottom 屬性根據內部內容的縱橫比調整 iframe 的高度來完成。
<iframe id="myiframe" src="http://example.com"></iframe>
<style>
#myiframe {
width: 100%;
height: 100%;
}
</style>
使用 HTML
您也可以使用 HTML 調整 iframe 的寬度和高度以適應其內容。這可以透過將 iframe 元素的 width 和 height 屬性設定為 100% 來完成。
<iframe width="100%" height="100%" src="http://example.com"></iframe>
注意 - 請記住，當使用 JavaScript 或 CSS 調整 iframe 大小時，可能會導致跨域 iframe 出現問題，因為瀏覽器可能會阻止訪問 iframe 內的內容。在這種情況下，建議使用 HTML 方法。
示例
這是一個使用 JavaScript 調整 iframe 的寬度和高度以適應其內容的完整工作示例：
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
var iframe = document.getElementById("myiframe");
iframe.width = iframe.contentWindow.document.body.scrollWidth;
iframe.height = iframe.contentWindow.document.body.scrollHeight;
}
</script>
</head>
<body>
<iframe id="myiframe" src="https://wikipedia.org/wiki/Main_Page"></iframe>
</body>
</html>
更新於：2023年9月2日
9.3萬+ 次瀏覽
廣告