內嵌內容

7.1 元素 <iframe>

HTML 中的 <iframe> 元素用於在當前文件中嵌入另一個 HTML 文檔。 這樣可以在主文檔中顯示其他網頁的內容，使得可以集成各種資源，比如視頻、地圖、文件和其他網頁。

<iframe> 元素創建了一個嵌入框架，可以顯示其他 HTML 文檔。 該文檔可以從任何 URL 加載並獨立於主文檔運行。

語法：

    
      <iframe src="URL"></iframe>
    
  

使用範例：

    
      <iframe src="https://www.example.com" width="600" height="400" title="iframe 示例"></iframe>
    
  

屬性

• src: 要加載到 <iframe> 中的文檔的 URL 地址
• width: 框架的寬度（可以用像素或百分比表示）
• height: 框架的高度（可以用像素或百分比表示）
• title: 框架內容的簡短描述（對於可訪問性非常重要）
• name: 框架的名稱，可用於鏈接和表單的目標
• sandbox: 設置框架內容的限制，提高安全性
• allow: 定義可以在 <iframe> 中使用的功能（例如，allowfullscreen 用於全屏模式）

7.2 屬性 allowfullscreen

allowfullscreen 屬性允許為加載到 <iframe> 中的內容啟用全屏模式。 沒有該屬性，內容將無法進入全屏模式。

語法：

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

使用範例：

    
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        allowfullscreen>
      </iframe>
    
  

全屏模式允許用戶在全屏模式下查看視頻或其他資源，改善用戶體驗。

7.3 屬性 allow

allow 屬性定義了可以在 <iframe> 中使用的功能，比如訪問地理位置、攝像頭、麥克風和全屏模式。

語法：

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

使用範例：

    
      <iframe
        src="https://www.example.com"
        allow="geolocation; microphone; camera; fullscreen">
      </iframe>
    
  

優勢：

• 功能控制: 允許指定嵌入內容可以使用哪些功能和 API
• 權限管理: 提供靈活性來管理對不同功能的訪問，如地理位置和攝像頭

7.4 屬性 sandbox

sandbox 屬性用於對加載到 <iframe> 中的內容應用限制。它防止執行某些操作，如執行腳本或打開彈出窗口，從而提高安全性。

語法：

    
      sandbox="allow-scripts allow-same-origin"
    
  

sandbox 屬性值：

• allow-forms: 允許提交表單
• allow-modals: 允許使用模態窗口
• allow-orientation-lock: 允許鎖定屏幕方向
• allow-pointer-lock: 允許捕獲指針
• allow-popups: 允許打開彈出窗口
• allow-popups-to-escape-sandbox: 允許彈出窗口逃離沙箱
• allow-presentation: 允許訪問演示 API
• allow-same-origin: 允許來自同一來源的腳本執行
• allow-scripts: 允許執行腳本
• allow-storage-access-by-user-activation: 允許用戶激活後訪問存儲
• allow-top-navigation: 允許頂級導航
• allow-top-navigation-by-user-activation: 允許用戶激活後的頂級導航

使用範例：

    
      <iframe
        src="https://www.example.com"
        sandbox="allow-scripts allow-same-origin">
      </iframe>
    
  

優勢：

• 安全性: 防止執行潛在惡意腳本並限制嵌入內容的功能
• 訪問控制: 允許開發人員準確指定嵌入內容允許的功能

7.5 屬性 loading

loading 屬性管理 <iframe> 的加載方式，允許在元素可見之前延遲加載（懶加載）。

loading 屬性值：

• lazy: 延遲加載 <iframe> 直到元素可見
• eager: 立即加載 <iframe>，無論其可見性如何

語法：

    
      loading="狀態"
    
  

使用範例：

    
      <iframe
        src="https://www.example.com"
        width="600"
        height="400"
        loading="lazy">
      </iframe>
    
  

優勢：

• 性能優化: 懶加載減少加載數據量，加速頁面加載時間
• 資源使用減少: 僅加載用戶實際看到和使用的元素