iframe 元素是一個 HTML 元素，允許您在當前網頁中嵌入另一個網頁或文檔。它提供了一種在不離開原始頁面或上下文的條件下，在網頁中包含交互式內容或外部內容的強大方式。

iframe 屬性

iframe 元素有許多屬性，可用于自定義其行為和外觀。以下是一些最常用的屬性：

• src ：指定要嵌入的網頁或文檔的 URL。
• width ：設置嵌入式網頁或文檔的寬度，單位為像素。
• height ：設置嵌入式網頁或文檔的高度，單位為像素。
• name ：為 iframe 元素分配一個名稱，以便使用 javaScript 或其他腳本對其進行引用。
• Scrolling ：控制是否在嵌入式網頁或文檔周圍顯示滾動條。可能的選項有 "auto"（自動滾動）、"yes"（始終滾動）和 "no"（從不滾動）。
• frameborder ：指定是否顯示 iframe 元素周圍的邊框。可能的選項有 "0"（無邊框）、"1"（實線邊框）和 "2"（3D 邊框）。

父子頁面通信

iframe 元素最強大的功能之一是允許父子頁面之間的通信。通過使用 JavaScript，可以從父頁面訪問 iframe 的內容，反之亦然。

要從父頁面訪問 iframe 的內容，可以使用以下代碼：

var iframeDocument = document.getElementById("iframe-id").contentDocument;iframeDocument.getElementById("element-id").innerHTML = "新的內容";

要從 iframe 訪問父頁面的內容，可以使用以下代碼：

var parentDocument = window.parent.document;parentDocument.getElementById("element-id").innerHTML = "新的內容";

iframe 傳遞參數

使用 iframe 時，還可以從父頁面向 iframe 傳遞參數。這可以通過使用 URL 哈希（）或查詢字符串（?）來實現。

要使用 URL 哈希傳遞參數，請使用以下代碼：

要使用查詢字符串傳遞參數，請使用以下代碼：

可以在 iframe 中使用 JavaScript 訪問這些參數：

var parameter = window.location.hash.substring(1).split("=")[1];

使用 iframe 的示例

iframe 元素有許多使用場景，包括：

• 嵌入外部視頻或音頻播放器
• 創建可與外部 API 交互的自定義小部件
• 加載需要不同安全域或協議的第三方內容
• 創建可隨時輕松替換或更新的模塊化頁面

結論

iframe 元素是構建交互式和動態網頁的強大工具。通過了解其屬性和使用方式，您可以創建復雜的 web 應用程序和體驗。

---

---

相關標簽： Web、 建立交互式、 屬性入門、 iframe、 iframe父子頁面傳參數、 頁面、

上一篇：iframe屬性最佳實踐優化嵌入式內容iframe嵌

下一篇：iframe屬性詳解自定義嵌入式體驗iframe父子