概念
iframe 是 HTML 中用於在一個網頁中嵌入另一個網頁的元素。它的全稱是 "inline frame"。通過 iframe，你可以在一個頁面中顯示來自其他網站的內容，或者在同一網站內加載其他頁面。
iframe 的基本結構
<iframe src="URL" width="寬度" height="高度" frameborder="邊框" allowfullscreen="允許全屏" name="名字"></iframe>常用屬性
| 屬性 | 説明 | 例子 |
|---|---|---|
| frameborder | 設置是否顯示 iframe 的邊框。值為 0 表示無邊框，1 表示有邊框。 | frameborder="0" |
| allowfullscreen | 允許 iframe 內容全屏顯示。 | allowfullscreen |
| name | 給 iframe 一個名字，用於在同一頁面中多次引用它。 | name="myframe" |
| sandbox | 提供一系列安全選項，限制 iframe 內內容的行為 | sandbox="allow-scripts" |
其中，sandbox 屬性的常見值包括：
- allow-same-origin: 允許 iframe 讀取和寫入自己的文檔內容（跨域時無效）。
- allow-scripts: 允許執行 JavaScript。
- allow-forms:允許提交表單。
- allow-top-navigation：允許 iframe 導航到父窗口的頂級頁面。
優缺點
優點
- 內容隔離: iframe 可以將嵌入內容與父頁面隔離開來，這意味着嵌入的內容不會直接影響父頁面的佈局或樣式。這種隔離對於嵌入第三方內容（如廣告、視頻、地圖）非常有用，因為你不需要擔心外部內容干擾你的網站。
- 加載優化: iframe 的內容是獨立加載的，這意味着在 iframe 內嵌入的內容不會阻塞主頁面的加載。主頁面可以先加載和顯示，嵌入內容可以稍後加載，提升用户體驗。
- 跨域嵌入: iframe 可以用來嵌入來自其他域的內容，即使這些內容與當前網站不在同一域名下，這在某些集成場景中非常有用。
- 內容更新方便: 通過 iframe 嵌入的內容可以獨立更新，而不影響父頁面的其他內容。這使得內容管理和更新更加方便。
- 多源展示: 你可以在一個頁面中同時展示來自多個來源的內容，這在展示不同類型的數據（例如社交媒體嵌入、新聞片段）時非常有用。
缺點
- 安全問題: iframe 可能引入安全風險，尤其是當嵌入來自不可信來源的內容時。這可能會導致 XSS（跨站腳本攻擊）或 Clickjacking（點擊劫持）等安全漏洞。因此在嵌入外部內容時需要謹慎，建議使用 sandbox 屬性限制其行為。
- 不易調整樣式: iframe 內的內容相對獨立，因此你無法輕鬆地通過父頁面的 CSS 或 JavaScript 來控制 iframe 內的樣式或內容。這使得在調整 iframe 的外觀和行為時可能遇到困難。
- SEO（搜索引擎優化）問題: 搜索引擎可能不會索引 iframe 中的內容，這可能會影響頁面的 SEO 效果。嵌入的重要內容時要特別注意這一點。
- 響應式設計問題: 雖然可以使用一些技巧使 iframe 響應式，但與直接控制內容相比，還是存在一些限制。尤其是在移動設備上，確保 iframe 內容適應不同屏幕大小可能需要額外的工作。
- 加載速度: 如果嵌入的內容較大或者來自於慢速服務器，iframe 可能會拖慢頁面的整體加載速度，影響用户體驗。
案例
iframe嵌入Google地圖
地址在谷歌地圖的share裏面的Embed a map複製
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d235816.55164076661!2d113.88906948910096!3d22.555393423720552!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3403f408d0e15291%3A0xfdee550db79280c9!2sShenzhen%2C%20Guangdong%20Province%2C%20China!5e0!3m2!1sen!2sus!4v1723453055387!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
iframe嵌入b站視頻
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=2271112&bvid=BV1es411D7sW&cid=3540266&p=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen width="560" height="315"></iframe>
轉載自開思通智網：https://w3.opensnn.com/os/article/10001204
