當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

HTML <iframe>用法及代碼示例


HTML <iframe> 標簽有助於在網頁中嵌入來自其他來源(例如視頻、Map或外部網站)的內容。它隻是指定一個內聯框架。

用法

<iframe src=
"https://www.geeksforgeeks.org/" 
         title="GeeksforGeeks">
</iframe>

注意：包含 <iframe> 標記的標題屬性非常重要。屏幕閱讀器使用此屬性來宣布鏈接的目的或內容。

屬性

下表顯示了 HTML <iframe> 標記的屬性、值和說明。

Attributes

Values

Descriptions
<iframe> width屬性 pixels 調整 <iframe> 的寬度。默認值為 300 像素。
<iframe> src屬性 URL 指定要嵌入的文檔的地址。
allowfullscreen 對或錯 允許 <iframe> 激活全屏模式。
allowpaymentrequest 對或錯 為 cross-origin iframe 啟用付款請求 API。
loading 即刻或懶惰 確定瀏覽器何時加載 <iframe>。
IFrame srcdoc HTML代碼 設置要在 <iframe> 中顯示的 HTML 內容。
<iframe> sandbox屬性 allow-forms、allow-pointer-lock、allow-popups、allow-same-origin、allow-scripts、allow-top-navigation 對 <iframe> 內的內容實施限製。
allow 函數策略字符串 指定 <iframe> 的函數策略。
<iframe> height屬性 pixels 設置 <iframe> 的高度。默認值為 150 像素。
<iframe> name屬性 Text 指定 <iframe> 的名稱。
referrerpolicy no-referrer、no-referrer-when-downgrade、原點、origin-when-cross-origin、same-origin、strict-origin-when-cross-原點、unsafe-url 控製用於獲取 iframe 的引薦來源網址信息。

示例 1：使用 iframe 標簽實現允許全屏用於激活全屏模式的屬性。

HTML


<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>HTML Iframe Tag</title> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
          GeeksforGeeks 
      </h1> 
  
    <iframe width="400" 
            height="200" 
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20240108102825/mern.mp4"
            allowfullscreen loading="lazy"> 
    </iframe> 
</body> 
  
</html>

輸出：

frt

示例 2：另一個例子展示了 iframe 標簽的實現允許全屏用於激活全屏模式和 iframe 邊框的屬性。

HTML


<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>HTML Iframe Tag</title> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
          GeeksforGeeks 
      </h1> 
  
    <iframe width="400"
            height="200"
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20240108102825/mern.mp4"
            allowfullscreen style="border: 5px solid green; 
                                   box-sizing: border-box;"> 
    </iframe> 
</body> 
  
</html>

輸出：

der

支持的瀏覽器

  • chrome 1
  • 邊 12
  • 狩獵4
  • 火狐1
  • Opera 15


相關用法


注：本文由純淨天空篩選整理自pankaj_gupta_gfg大神的英文原創作品 HTML <iframe> Tag。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。