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中文网其他相关文章！