HTML 中的 iframe
HTML 中的 iframe 只是用作 HTML 文件的內聯框架，用於向其中添加另一個 HTML 文件。它主要用於網頁或網頁開發過程中，透過另一個來源（例如該網頁上的廣告）包含其他內容。
大多數網頁設計師使用 Iframe 在網站或網頁上呈現互動式應用程式。使用 JavaScript 或 HTML 中的目標屬性可以實現這一點。
Iframe 的主要用途是在另一個網頁中顯示一個網頁。內嵌框架應使用名為
文法
- 現在我們來看看 Iframe 到底如何使用：
<iframe src ="URL"></iframe>
- 這裡
範例：
<iframe src ="www.educba.com" ></iframe>
- 也可以以像素格式為我們的 Iframe 提供一些特定的高度和寬度，如下所示：
<iframe src ="URL" height="value" width="value"></iframe>
- 在上面的語法中，所有的事情都會變得相同；此外，我們可以以像素格式指定高度和寬度，將它們定義為
範例：
<iframe src ="www.educba.com" height="300" width="300"></iframe>
- 另一個透過 CSS 使用值來定義 iframe 高度和寬度的方法，語法如下：
<iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe>
- 所有內容與上面相同，只是在指定值上進行了更改。
範例：
<iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe>
- 加入 iframe 的另一個功能是我們可以使用 border none 屬性來刪除已經定義的框架邊框。其文法如下：
<iframe src ="URL" style="border : none;"></iframe>
- 在CSS的幫助下，還可以對邊框做很多事情，例如改變它的大小，給邊框應用一些顏色等等。
可以使用以下語法將 iframe 用作連結的目標：
<iframe src ="URL" name="iframe_a"></iframe>
- 在上面的語法中，src是我們普通的URL；在這裡，連結的目標屬性將引用我們的 iframe 標記中的名稱屬性。
範例：
<iframe src ="www.educba.com" name="iframe_a"></iframe>
Iframe 標籤屬性
Iframe 中使用了不同的屬性標籤。如下：
- Src: 此屬性用於插入需要包含在框架中的檔案。 URL 指定要在 iframe 中載入的目標網頁。
- 名稱：名稱是一個屬性，用來提供框架一些識別名稱。當您建立一個連結來開啟另一個網頁時，它最有用。
- allowfullscreen: 此屬性可讓您以全角格式顯示框架。所以我們必須將值設為 true 才能發生在這個函數上。
- Frameborder： 這是一個有用的屬性，可讓您顯示或不顯示框架邊框。值1是顯示邊框，0是不向框架顯示邊框。
- 邊距寬度： 讓您定義框架左右兩側之間的空間。
- 邊距高度：這允許您定義框架頂部和底部之間的空間。
- 捲動： 這些屬性控制捲軸是否顯示在框架中。包含的值為「是」、「否」或「自動」。
- 高度： 用來定義框架的高度。無論是百分比還是像素
- 寬度： 用來定義框架的寬度。無論是百分比還是像素
- Longdesc：借助此屬性，您可以連結另一個頁面，其中包含框架內容的詳細描述。
HTML 中的 Iframe 範例
以下是 HTML 中 Iframe 的一些範例，解釋如下：
範例#1
讓我們考慮一個範例，我們將展示如何建立具有特定高度和寬度的 iframe。
代碼：
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" height="300" width="300"></iframe> </body> </html>
輸出：
範例#2
讓我們考慮另一個例子，我們將展示如何建立具有特定高度和寬度的 iframe。但在這個例子中，我們透過 CSS 指定高度和寬度。在這裡我們可以看到滾動條正在根據內容大小進行調整。
代碼：
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" style="height:100px;width:300px;"></iframe> </body> </html>
輸出：
Example #3
Here we are considering one example in which we will add a border to the iframe by adding some extra CSS properties to show a change in the border’s size, change in the border color, etc. So we can add as much style to our iframe.
Code:
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here we are showing an example of Iframe which containing a border with some additional CSS proprties</p> <iframe src="C:\Users\Sonali\Desktop\iframe.html" style="border:3px solid Blue; height: 200px;"></iframe> </body> </html>
Output:
Example #4
Let’s consider another example where we will show how the target attribute opens a webpage link using an iframe.
Code:
<!DOCTYPE html> <html> <body> <h2>Iframe Demo- Target for a Link</h2> <iframe height="200px" width="100%" src="C:\Users\Sonali\Desktop\iframe1.html" name="iframe1_a"></iframe> <p><a href="https://www.educba.com/courses/">EDUCBA</a></p> <p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p> </body> </html>
Output:
Target Output:
As shown above, for example, we can click on the target link EDUCBA so that it will open the following web page shown below.
Conclusion
An iframe is an inline frame that includes another HTML document in itself. It is the most powerful HTML element for web designing. You can add content from another source. It uses different HTML attributes like Global Attributes, Event Attributes, etc.
以上是HTML 中的 iframe的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
您如何在PHP中解析和處理HTML/XML？
Feb 07, 2025 am 11:57 AM
本教程演示瞭如何使用PHP有效地處理XML文檔。 XML（可擴展的標記語言）是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲
