HTML 中的 iframe 只是用作 HTML 文件的內(nèi)聯(lián)框架,用於向其中添加另一個 HTML 文件。它主要用於網(wǎng)頁或網(wǎng)頁開發(fā)過程中,透過另一個來源(例如該網(wǎng)頁上的廣告)包含其他內(nèi)容。
大多數(shù)網(wǎng)頁設(shè)計師使用 Iframe 在網(wǎng)站或網(wǎng)頁上呈現(xiàn)互動式應(yīng)用程式。使用 JavaScript 或 HTML 中的目標(biāo)屬性可以實現(xiàn)這一點。
Iframe 的主要用途是在另一個網(wǎng)頁中顯示一個網(wǎng)頁。內(nèi)嵌框架應(yīng)使用名為
文法
- 現(xiàn)在我們來看看 Iframe 到底如何使用:
<iframe src ="URL"></iframe>
範(fàn)例:
<iframe src ="www.educba.com" ></iframe>
- 也可以以像素格式為我們的 Iframe 提供一些特定的高度和寬度,如下所示:
<iframe src ="URL" height="value" width="value"></iframe>
- 在上面的語法中,所有的事情都會變得相同;此外,我們可以以像素格式指定高度和寬度,將它們定義為
範(fàn)例:
<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>
- 所有內(nèi)容與上面相同,只是在指定值上進(jìn)行了更改。
範(fàn)例:
<iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe>
- 加入 iframe 的另一個功能是我們可以使用 border none 屬性來刪除已經(jīng)定義的框架邊框。其文法如下:
<iframe src ="URL" style="border : none;"></iframe>
- 在CSS的幫助下,還可以對邊框做很多事情,例如改變它的大小,給邊框應(yīng)用一些顏色等等。
可以使用以下語法將 iframe 用作連結(jié)的目標(biāo):
<iframe src ="URL" name="iframe_a"></iframe>
- 在上面的語法中,src是我們普通的URL;在這裡,連結(jié)的目標(biāo)屬性將引用我們的 iframe 標(biāo)記中的名稱屬性。
範(fàn)例:
<iframe src ="www.educba.com" name="iframe_a"></iframe>
Iframe 標(biāo)籤屬性
Iframe 中使用了不同的屬性標(biāo)籤。如下:
-
Src: 此屬性用於插入需要包含在框架中的檔案。 URL 指定要在 iframe 中載入的目標(biāo)網(wǎng)頁。
-
名稱:名稱是一個屬性,用來提供框架一些識別名稱。當(dāng)您建立一個連結(jié)來開啟另一個網(wǎng)頁時,它最有用。
-
allowfullscreen: 此屬性可讓您以全角格式顯示框架。所以我們必須將值設(shè)為 true 才能發(fā)生在這個函數(shù)上。
-
Frameborder: 這是一個有用的屬性,可讓您顯示或不顯示框架邊框。值1是顯示邊框,0是不向框架顯示邊框。
-
邊距寬度: 讓您定義框架左右兩側(cè)之間的空間。
-
邊距高度:這允許您定義框架頂部和底部之間的空間。
-
捲動: 這些屬性控制捲軸是否顯示在框架中。包含的值為「是」、「否」或「自動」。
-
高度: 用來定義框架的高度。無論是百分比還是像素
-
寬度: 用來定義框架的寬度。無論是百分比還是像素
-
Longdesc:借助此屬性,您可以連結(jié)另一個頁面,其中包含框架內(nèi)容的詳細(xì)描述。
HTML 中的 Iframe 範(fàn)例
以下是 HTML 中 Iframe 的一些範(fàn)例,解釋如下:
範(fàn)例#1
讓我們考慮一個範(fàn)例,我們將展示如何建立具有特定高度和寬度的 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>
輸出:

範(fàn)例#2
讓我們考慮另一個例子,我們將展示如何建立具有特定高度和寬度的 iframe。但在這個例子中,我們透過 CSS 指定高度和寬度。在這裡我們可以看到滾動條正在根據(jù)內(nèi)容大小進(jìn)行調(diào)整。
代碼:
<!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的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!