如何使用HTML iframe標籤從另一個站點嵌入內容？

使用，可添加width、height 和style="border:none;" 等屬性控制外觀；為了實現響應式佈局，可通過百分比設置尺寸或使用容器結合padding 和絕對定位保持寬高比，同時注意跨域限制、加載性能、SEO 影響及安全策略等注意事項；常見用途包括嵌入地圖、第三方表單、社交媒體內容及內部系統集成。

在web 開發中，如果你想把另一個網站的內容嵌入到自己的頁面裡， <iframe></iframe>標籤是一個簡單直接的方法。它就像一個窗口，可以在你的網頁中打開另一個網頁。

基本用法

使用<iframe></iframe>最基本的方式就是寫上這個標籤，並通過src屬性指定你要嵌入的網址：

 <iframe src="https://example.com"></iframe>

這樣瀏覽器就會在當前頁面中顯示來自example.com 的內容。默認情況下，iframe 會有一個邊框，如果你不想要邊框，可以加上 style="max-width:90%"來去掉它。

常見設置還包括寬度和高度，比如：

 <iframe src="https://example.com" width="600"    style="max-width:90%" style="border:none;"></iframe>

控制iframe 的大小和響應式佈局

iframe 默認是固定尺寸的，但在現代網頁設計中，響應式佈局更受歡迎。你可以通過CSS 來讓它自動適應不同設備的屏幕。

一種常用方法是使用百分比設置寬度，或者結合容器做響應式處理：

 <div style="position:relative; padding-bottom:56.25%;">
  <iframe 
    src="https://example.com" 
    style="position:absolute; top:0; left:0; width:100%; height:100%; border:none;">
  </iframe>
</div>

這個技巧利用了“padding 百分比”來保持寬高比（比如16:9），適合嵌入視頻或地圖等內容。

還可以配合媒體查詢來為不同屏幕調整iframe 大小：

• 在桌面端顯示較大尺寸
• 在移動端縮小寬度或調整比例

安全與兼容性注意事項

雖然iframe 很方便，但也有一些需要注意的地方：

• 跨域限制：如果嵌入的是其他網站的內容，你通常無法通過JavaScript 操作它的內容。
• 加載性能：iframe 會額外請求資源，可能影響頁面加載速度。
• SEO 影響：搜索引擎不會特別重視iframe 中的內容，不利於SEO。
• 安全策略：有些網站設置了X-Frame-Options或Content-Security-Policy ，禁止被嵌入到iframe 中。

因此，在使用前最好確認目標網站是否允許被嵌套。如果對方不允許，iframe 可能顯示為空白或者報錯。

常見用途舉例

一些常見的iframe 使用場景包括：

• 嵌入地圖（如Google Maps）
• 插入第三方表單（如Google 表單、Typeform）
• 顯示廣告或社交媒體內容（如Twitter 推文、Facebook 貼文）
• 內部系統集成（如報表、儀錶盤）

例如嵌入Google 地圖：

 <iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.096837620503!2d-122.41941548468125!3d37.77492927975973!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085809c8a0d0d2b:0x3e82c4da0c5ddba0!2sSan Francisco, CA!5e0!3m2!1sen!2sus!4v1614820000000!5m2!1sen!2sus"
  width="100%" 
  height="450" 
  style="border:0;" 
  allowfullscreen="">
</iframe>

基本上就這些。 iframe 是個基礎但實用的HTML 元素，只要注意使用方式，就能很好地完成內容嵌入任務。

以上是如何使用HTML iframe標籤從另一個站點嵌入內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！