HTML 中的 iframe-html教學-PHP中文網

HTML 中的 iframe 只是用作 HTML 文件的內聯框架，用於向其中添加另一個 HTML 文件。它主要用於網頁或網頁開發過程中，透過另一個來源（例如該網頁上的廣告）包含其他內容。

大多數網頁設計師使用 Iframe 在網站或網頁上呈現互動式應用程式。使用 JavaScript 或 HTML 中的目標屬性可以實現這一點。

Iframe 的主要用途是在另一個網頁中顯示一個網頁。內嵌框架應使用名為的標籤來顯示。它的工作原理就像網頁上的一個矩形塊，瀏覽器可以在其中顯示另一個帶有捲軸和邊框的文件。

文法

現在我們來看看 Iframe 到底如何使用：

<iframe src ="URL"></iframe>

登入後複製

這裡是將定義 HTML iframe 的標籤。將包含用於定義內嵌框架頁面 URL 的 src 屬性。

範例：

<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>

登入後複製

輸出：

HTML 中的 iframe

範例#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>

登入後複製

輸出：

HTML 中的 iframe

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:

HTML 中的 iframe

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:

HTML 中的 iframe

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.

HTML 中的 iframe

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中文網其他相關文章！