iframe 元素使您能夠將另一個文檔嵌入當前文檔中，為用戶提供嵌入式體驗。它提供了廣泛的屬性，允許您自定義嵌入式內容的外觀和行為。

常見 iframe 屬性

src 屬性

src 屬性指定要嵌入的文檔的 URL。它是 iframe 元素的必需屬性。

width 和 height 屬性

width 和 height 屬性分別設置 iframe 的寬度和高度。單位可以是像素 (px) 或百分比 (%)。

frameborder 屬性

frameborder 屬性指定 iframe 是否顯示邊框。將其設置為 0 可隱藏邊框，將其設置為 1 可顯示邊框。

scrolling 屬性

scrolling 屬性指定 iframe 是否具有滾動條?？梢詫⑵湓O置為 "auto"（必要時顯示滾動條）、"no"（禁用滾動條）或 "yes"（始終顯示滾動條）。

父子頁面通信

postMessage() 方法

iframe 元素提供了 postMessage() 方法，允許父子頁面之間進行通信。父頁面可以使用以下方式發送消息：

    let iframe = document.querySelector('iframe');iframe.contentWindow.postMessage('Hello from parent', 'https://example.com');

子頁面可以使用以下方式接收消息：

    window.addEventListener('message', function(event) {if (event.origin === 'https://example.com') {console.log(event.data); // 輸出: "Hello from parent"}});

onmessage 事件

父頁面可以使用 onmessage 事件偵聽來自子頁面的消息：

    let iframe = document.querySelector('iframe');iframe.addEventListener('message', function(event) {console.log(event.data); // 輸出: 消息內容});

其他屬性

屬性	描述
name	iframe 的名稱
title	iframe 的標題
allowfullscreen	允許嵌入式內容進入全屏模式
sandbox	設置 iframe 中嵌入式內容的沙盒策略

用例

嵌入視頻

您可以使用 iframe 將 YouTube 視頻嵌入到您的網頁中：

嵌入地圖

您可以使用 iframe 將 google 地圖嵌入到您的網頁中：

嵌入社交媒體小組件

您可以使用 iframe 將社交媒體小組件嵌入到您的網頁中，例如推特時間線或 Facebook 評論框：

結論

iframe 元素提供了廣泛的屬性，允許您完全自定義嵌入式體驗。通過了解這些屬性，您可以創建引人入勝且交互式的內容，為您的用戶提供豐富且有價值的體驗。

---

---

相關標簽： iframe、 iframe父子頁面傳參數、 屬性詳解、 自定義嵌入式體驗、

上一篇：iframe屬性入門建立交互式Web頁面iframe父

下一篇：終極指南掌握iframe屬性以增強Web應用程序