HTML - <iframe> 標籤

HTML <iframe> 標籤用於建立內聯框架。內聯框架用於在當前 HTML 文件中顯示另一個 HTML 文件。我們可以使用 HTML 屬性和 CSS 屬性來根據需要裝飾 iframe。

語法

<iframe src="">
    .....
</iframe >

屬性

HTML iframe 標籤接受所有 HTML **全域性屬性** 和 **事件屬性。**

特定屬性

HTML <iframe> 標籤也接受以下附加屬性。

屬性	值	描述
align	left right top middle bottom	指定如何根據周圍文字對齊 iframe。
frameborder	1 0	指定是否在框架周圍顯示邊框。
height	畫素	指定內聯框架的高度。
longdesc	URL	指向框架內容的詳細描述的 URL。
marginheight	畫素	允許您指定框架邊框的左側和右側與框架內容之間的空間寬度。該值以畫素為單位給出。例如 marginwidth = "10"。
marginwidth	畫素	指定框架內容與其左右邊距之間的邊距（以畫素為單位）。
name	文字	框架的名稱
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	為 iframe 中的內容啟用一組額外的限制。
scrolling	yes no auto	確定捲軸操作
seamless	seamless	指定 iframe 應該看起來像是包含文件的一部分
src	URL	框架內容檔案的位置
srcdoc	HTML_code	指定要在 iframe 中顯示的頁面的 HTML 內容
width	畫素	指定內聯框架的寬度。

嘗試點選圖示執行按鈕以執行以下 HTML 程式碼以檢視輸出。

HTML iframe 標籤示例

建立簡單的 iframe

在此示例中，我們將建立一個 iframe 並在該 iframe 中呈現我們的主螢幕。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML iframe Tag</title>
   </head>

   <body>
       <h2>HTML iframe tag Example</h2>
      <iframe 
            src = "https://tutorialspoint.tw/index.htm" 
            width = "600" height="400">
      </iframe>
      
   </body>

</html>

刪除 Iframe 的邊框

在此示例中，我們將使用 CSS border 屬性刪除 ifrma 的預設邊框。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML iframe Tag</title>
   </head>

   <body>
       <h2>HTML iframe tag Example</h2>
      <iframe 
            src = "https://tutorialspoint.tw/index.htm" 
            width = "600" height="400" style="border:none;">
      </iframe>
      
   </body>

</html>

支援的瀏覽器

標籤
iframe	是	是	是	是	是

列印頁面