HTML - <iframe> 标签

HTML <iframe> 标签用于创建内联框架。内联框架用于在当前 HTML 文档中显示另一个 HTML 文档。我们可以使用 HTML 属性和 CSS 属性来根据需要装饰 iframe。

语法

<iframe src="">
    .....
</iframe >

属性

HTML iframe 标签接受所有 HTML **全局属性** 和 **事件属性。**

特定属性

HTML <iframe> 标签也接受以下附加属性。

属性	值	描述
align	left right top middle bottom	指定如何根据周围文本对齐 iframe。
frameborder	1 0	指定是否在框架周围显示边框。
height	像素	指定内联框架的高度。
longdesc	URL	指向框架内容的详细描述的 URL。
marginheight	像素	允许您指定框架边框的左侧和右侧与框架内容之间的空间宽度。该值以像素为单位给出。例如 marginwidth = "10"。
marginwidth	像素	指定框架内容与其左右边距之间的边距（以像素为单位）。
name	文本	框架的名称
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	为 iframe 中的内容启用一组额外的限制。
scrolling	yes no auto	确定滚动条操作
seamless	seamless	指定 iframe 应该看起来像是包含文档的一部分
src	URL	框架内容文件的位置
srcdoc	HTML_code	指定要在 iframe 中显示的页面的 HTML 内容
width	像素	指定内联框架的宽度。

尝试点击图标运行按钮以运行以下 HTML 代码以查看输出。

HTML iframe 标签示例

创建简单的 iframe

在此示例中，我们将创建一个 iframe 并在该 iframe 中呈现我们的主屏幕。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML iframe Tag</title>
   </head>

   <body>
       <h2>HTML iframe tag Example</h2>
      <iframe 
            src = "https://tutorialspoint.com/index.htm" 
            width = "600" height="400">
      </iframe>
      
   </body>

</html>

删除 Iframe 的边框

在此示例中，我们将使用 CSS border 属性删除 ifrma 的默认边框。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML iframe Tag</title>
   </head>

   <body>
       <h2>HTML iframe tag Example</h2>
      <iframe 
            src = "https://tutorialspoint.com/index.htm" 
            width = "600" height="400" style="border:none;">
      </iframe>
      
   </body>

</html>

支持的浏览器

标签
iframe	是	是	是	是	是

打印页面