HTML 中的 iframe 只是用作 HTML 文檔的內(nèi)聯(lián)框架,用于向其中添加另一個(gè) HTML 文檔。它主要用于網(wǎng)頁(yè)或網(wǎng)絡(luò)開發(fā)過(guò)程中,通過(guò)另一個(gè)來(lái)源(例如該網(wǎng)頁(yè)上的廣告)包含其他內(nèi)容。
大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師使用 Iframe 在網(wǎng)站或網(wǎng)頁(yè)上呈現(xiàn)交互式應(yīng)用程序。使用 JavaScript 或 HTML 中的目標(biāo)屬性可以實(shí)現(xiàn)這一點(diǎn)。
Iframe 的主要用途是在另一個(gè)網(wǎng)頁(yè)中顯示一個(gè)網(wǎng)頁(yè)。內(nèi)聯(lián)框架應(yīng)使用名為
語(yǔ)法
- 現(xiàn)在我們來(lái)看看 Iframe 到底如何使用:
<iframe src ="URL"></iframe>
示例:
<iframe src ="www.educba.com" ></iframe>
- 還可以以像素格式為我們的 Iframe 提供一些特定的高度和寬度,如下所示:
<iframe src ="URL" height="value" width="value"></iframe>
- 在上面的語(yǔ)法中,所有的事情都會(huì)變得相同;此外,我們可以以像素格式指定高度和寬度,將它們定義為
示例:
<iframe src ="www.educba.com" height="300" width="300"></iframe>
- 另一種通過(guò) CSS 使用值來(lái)定義 iframe 高度和寬度的方法,語(yǔ)法如下所示:
<iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe>
- 所有內(nèi)容與上面相同,只是在指定值上進(jìn)行了更改。
示例:
<iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe>
- 添加到 iframe 的另一個(gè)功能是我們可以使用 border none 屬性刪除已經(jīng)定義的框架邊框。其語(yǔ)法如下:
<iframe src ="URL" style="border : none;"></iframe>
- 在CSS的幫助下,還可以對(duì)邊框做很多事情,比如改變它的大小,給邊框應(yīng)用一些顏色等等。
iframe 可以通過(guò)使用以下語(yǔ)法用作鏈接的目標(biāo):
<iframe src ="URL" name="iframe_a"></iframe>
- 在上面的語(yǔ)法中,src是我們普通的URL;在這里,鏈接的目標(biāo)屬性將引用我們的 iframe 標(biāo)記中的名稱屬性。
示例:
<iframe src ="www.educba.com" name="iframe_a"></iframe>
Iframe 標(biāo)簽屬性
Iframe 中使用了不同的屬性標(biāo)簽。如下:
-
Src: 該屬性用于插入需要包含在框架中的文件。 URL 指定要在 iframe 中加載的目標(biāo)網(wǎng)頁(yè)。
-
名稱:名稱是一個(gè)屬性,用于為框架提供一些標(biāo)識(shí)名稱。當(dāng)您創(chuàng)建一個(gè)鏈接來(lái)打開另一個(gè)網(wǎng)頁(yè)時(shí),它最有用。
-
allowfullscreen: 此屬性允許您以全角格式顯示框架。所以我們必須將值設(shè)置為 true 才能發(fā)生在這個(gè)函數(shù)上。
-
Frameborder: 這是一個(gè)有用的屬性,允許您顯示或不顯示框架邊框。值1是顯示邊框,0是不向框架顯示邊框。
-
邊距寬度: 允許您定義框架左右兩側(cè)之間的空間。
-
邊距高度:這允許您定義框架頂部和底部之間的空間。
-
滾動(dòng): 這些屬性控制滾動(dòng)條是否在框架中顯示。包含的值為“是”、“否”或“自動(dòng)”。
-
高度: 用于定義框架的高度。無(wú)論是百分比還是像素
-
寬度: 用于定義框架的寬度。無(wú)論是百分比還是像素
-
Longdesc:借助此屬性,您可以鏈接另一個(gè)頁(yè)面,其中包含框架內(nèi)容的詳細(xì)描述。
HTML 中的 Iframe 示例
以下是 HTML 中 Iframe 的一些示例,解釋如下:
示例#1
讓我們考慮一個(gè)示例,我們將展示如何創(chuàng)建具有特定高度和寬度的 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
讓我們考慮另一個(gè)例子,我們將展示如何創(chuàng)建具有特定高度和寬度的 iframe。但在這個(gè)例子中,我們通過(guò) CSS 指定高度和寬度。在這里我們可以看到滾動(dòng)條正在根據(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)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!