HTML - 內聯框架

HTML iframe 是一個內聯框架，允許您在當前 HTML 文件中嵌入另一個文件。無論何時您想在網頁中顯示另一個網頁，都可以使用 iframe。

建立 iframe（內聯框架）

在 HTML 中，內聯框架由 <iframe> 標籤定義。此標籤在 HTML 文件中的指定位置建立一個矩形區域，瀏覽器可以在其中顯示外部文件，例如地圖或其他網頁。

Iframe 語法

以下是 HTML 中建立內聯框架 (iframe) 的語法

<iframe src="url" title="description"></iframe>

src 屬性

外部文件的 URL 或路徑使用 <iframe> 標籤的 src 屬性附加。如果 iframe 的內容超過指定的矩形區域，HTML 會自動包含捲軸。HTML 允許任意數量的 iframe，但它可能會影響網站的效能。

Iframe 示例

以下示例演示瞭如何在 HTML 中建立 iframe

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
  </head>
  <body>
    <p>It is an example of HTML Iframe</p>
    <iframe src="/html/menu.htm"> Sorry your browser does not support inline frames. </iframe>
  </body>
</html>

<iframe> 標籤屬性

下表描述了與 <iframe> 標籤一起使用的屬性。

序號	屬性和描述
1	src 此屬性用於提供應在框架中載入的檔名。其值可以是任何 URL。例如，src="/html/top_frame.htm" 將載入 html 目錄中可用的 HTML 檔案。
2	name 此屬性允許為特定框架命名。它用於指示應將文件載入到哪個框架中。當您想在一個框架中建立連結，這些連結將頁面載入到另一個框架中時，這很重要，在這種情況下，第二個框架需要一個名稱來識別自己是連結的目標。
3	height 此屬性指定 <iframe> 的高度。預設值為 150 畫素。
4	width 此屬性指定 <iframe> 的寬度。預設值為 300 畫素。
5	allow 用於指定訪問麥克風和攝像頭等功能的許可權策略。
6	loading 指定載入給定 iframe 的時間。

設定 Iframe 的高度和寬度

您可以使用 <iframe> 標籤的 height 和 width 屬性來設定 HTML iframe 的高度和寬度。

示例

以下示例演示瞭如何設定 iframe 的高度和寬度

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
  </head>
  <body>
    <h2>Example of Setting Height and width of HTML Iframe</h2>
    <iframe src="/index.htm" width="500" height="300"> 
    Sorry your browser does not support inline frames. 
    </iframe>
  </body>
</html>

以上程式碼將在具有指定高度和寬度的 iframe 中顯示“index.htm”網頁。

連結到 Iframe：Target 和 Name 屬性

您可以使用 iframe 作為目標框架，以在單擊連結時開啟網頁。

您可以使用 <iframe> 標籤的 name 屬性為連結（超連結）建立目標 iframe。name 屬性的值用於 <form> 和 <a> 等元素的 target 屬性中，以指定目標框架。

示例

以下示例演示瞭如何為超連結建立目標 iframe

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
  </head>
  <body>
    <h2>Linking to an Iframe: Target and Name Attributes</h2>
    <p>Click on the link below to load the content inside the specified frame...</p>
    <p><a href="/html/html_iframes.htm" target="Iframe">
      Iframe Tutorial
      </a>
    </p>
    <iframe style="background-color: skyblue;" name="Iframe" width="500" height="300">
    Sorry your browser does not support inline frames.
    </iframe>
  </body>
</html>

執行後，以上程式碼將生成一個連結和一個具有天藍色背景的 Iframe。單擊連結時，其內容將在 iframe 中開啟。

設定 Iframe 的樣式

您還可以使用 style 或 class 屬性將 CSS 規則應用於 iframe。

示例

以下示例演示瞭如何將 CSS 樣式應用於 iframe

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
    <style type="text/css">
      body{
        background-color: #FFF4A3;
      }
      .my_iframe{
        width: 90%;
        height: 180px;
        border: 2px solid #f40;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Example of Styling Iframe</h2>
    <iframe src="/index.htm" class="my_iframe"> 
    Sorry your browser does not support inline frames. 
    </iframe>
  </body>
</html>

多個 Iframe

您可以在網頁中嵌入多個文件（網頁）。HTML 允許您在 HTML 文件中使用多個 <iframe> 標籤。

注意：使用多個 iframe 可能會降低頁面載入速度。

示例

在以下示例中，我們使用多個 iframe 嵌入三個網頁

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
    <style type="text/css">
      body{
        background-color: #FFF4A3;
      }
      .my_iframe{
        width: 90%;
        height: 180px;
        border: 2px solid #f40;
        padding: 8px;
        margin-bottom: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Example of Multiple Iframes</h2>
    <h3>Index Page</h3>
    <iframe src="/index.htm" class="my_iframe"> 
    Sorry your browser does not support inline frames. 
    </iframe>
    <h3>Tutorials Library</h3>
    <iframe src="/tutorialslibrary.htm" class="my_iframe"> 
    Sorry your browser does not support inline frames. 
    </iframe>
    <h3>Compilers</h3>
    <iframe src="/codingground.htm" class="my_iframe"> 
    Sorry your browser does not support inline frames. 
    </iframe>        
  </body>
</html>

列印頁面