HTML iframe

HTML iframe 用于在网页中显示网页。

HTML iframe 用于在网页中显示网页。

HTML iframe 用法

HTML <iframe> 标签指定了一个内嵌框架，内嵌框架用于在当前 HTML 文档中嵌入另一个文档。

用法

<iframe src="要嵌入到框架的页面的 URL" title="对框架内容的说明"></iframe>

! 提示： 虽然 title 不是 <iframe> 元素的必须项，但请不要忽略它，因为屏幕阅读器使用它来读出 iframe 的内容。

设置 iframe 的宽度和高度

使用 width 和 height 属性指定 iframe 的宽度和高度。

默认情况下，高度和宽度以像素为单位指定。

<iframe src="demo_iframe.htm" height="200" width="300" title="iframe 例子"></iframe>

您也可以在 style 属性中使用 CSS 的width 和 height 属性设定宽度和高度。

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="iframe 例子"></iframe>

移除 iframe 的边框

默认情况下，iframe 周围有一个边框。要移除边框，添加 style属性并使用 CSS border 属性即可。

例子

<iframe src="demo_iframe.htm" style="border:none;" title="iframe 例子"></iframe>

使用 CSS，您还可以更改 iframe 边框的大小、样式和颜色：

例子

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="iframe 例子"></iframe>

Iframe - 链接的目标

iframe 可以用作链接的目标框架。

要想链接的页面在指定的 iframe 框架中打开，只需将链接的 target 属性值设置为 iframe 的 name 属性值即可。

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<!-- 链接的 target 属性值为 iframe 的 name 属性值 -->
<p><a href="https://www.gobeta.net" target="iframe_a">GoBeta.NET</a></p>

总结

  • HTML <iframe> 标签定义一个内联框架
  • src  属性定义了要嵌入的页面的 URL
  • 始终为 iframe 设定 title 属性（用于屏幕阅读器）
  • 使用 width 和 height 属性设定 iframe 的大小
  • 使用 border:none; 除去 iframe 周围的边框
HTML id 属性 HTML JavaScript