Day 13 - iframe 與嵌入內容的魔法 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 13

Modern Web

程式煉金術：Bug退散！前端驅魔記系列第 13 篇

Day 13 - iframe 與嵌入內容的魔法

17th鐵人賽 30dayshtml

joanna2005823

團隊nutc imac

2025-09-27 17:45:39

36 瀏覽

分享至

學習目標

理解 <iframe> 的用途與限制
學會嵌入其他網站內容（如 Google Map、YouTube）
認識 width、height、src、title 屬性
了解安全性與替代方案（避免濫用 iframe）
嘗試做一個簡單的地圖或影片嵌入

重點觀念（把外部世界拉進網頁）

iframe 是內嵌頁面：能在網頁中載入另一個獨立文件。
常見應用：地圖、影片、文件嵌入。
注意安全性：有些網站禁止被 iframe 引入（X-Frame-Options）。
title 屬性：對無障礙設計很重要，能告訴使用者 iframe 的內容。
避免濫用：iframe 會增加載入負擔，能用 API 的情況盡量不用。

iframe 示範

<body>
  <h1>iframe 嵌入內容示範</h1>

  <h2>YouTube 影片</h2>
  <iframe width="560" height="315" 
          src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
          title="YouTube video player"
          frameborder="0"
          allowfullscreen>
  </iframe>

  <h2>Google 地圖</h2>
  <iframe 
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3..."
          width="600" height="450"
          style="border:0;"
          allowfullscreen=""
          loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"
          title="Google Map">
  </iframe>
</body>