当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

HTML <iframe>用法及代码示例


HTML <iframe> 标签有助于在网页中嵌入来自其他来源(例如视频、Map或外部网站)的内容。它只是指定一个内联框架。

用法

<iframe src=
"https://www.geeksforgeeks.org/" 
         title="GeeksforGeeks">
</iframe>

注意：包含 <iframe> 标记的标题属性非常重要。屏幕阅读器使用此属性来宣布链接的目的或内容。

属性

下表显示了 HTML <iframe> 标记的属性、值和说明。

Attributes

Values

Descriptions
<iframe> width属性 pixels 调整 <iframe> 的宽度。默认值为 300 像素。
<iframe> src属性 URL 指定要嵌入的文档的地址。
allowfullscreen 对或错 允许 <iframe> 激活全屏模式。
allowpaymentrequest 对或错 为 cross-origin iframe 启用付款请求 API。
loading 即刻或懒惰 确定浏览器何时加载 <iframe>。
IFrame srcdoc HTML代码 设置要在 <iframe> 中显示的 HTML 内容。
<iframe> sandbox属性 allow-forms、allow-pointer-lock、allow-popups、allow-same-origin、allow-scripts、allow-top-navigation 对 <iframe> 内的内容实施限制。
allow 函数策略字符串 指定 <iframe> 的函数策略。
<iframe> height属性 pixels 设置 <iframe> 的高度。默认值为 150 像素。
<iframe> name属性 Text 指定 <iframe> 的名称。
referrerpolicy no-referrer、no-referrer-when-downgrade、原点、origin-when-cross-origin、same-origin、strict-origin-when-cross-原点、unsafe-url 控制用于获取 iframe 的引荐来源网址信息。

示例 1：使用 iframe 标签实现允许全屏用于激活全屏模式的属性。

HTML


<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>HTML Iframe Tag</title> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
          GeeksforGeeks 
      </h1> 
  
    <iframe width="400" 
            height="200" 
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20240108102825/mern.mp4"
            allowfullscreen loading="lazy"> 
    </iframe> 
</body> 
  
</html>

输出：

frt

示例 2：另一个例子展示了 iframe 标签的实现允许全屏用于激活全屏模式和 iframe 边框的属性。

HTML


<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>HTML Iframe Tag</title> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
          GeeksforGeeks 
      </h1> 
  
    <iframe width="400"
            height="200"
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20240108102825/mern.mp4"
            allowfullscreen style="border: 5px solid green; 
                                   box-sizing: border-box;"> 
    </iframe> 
</body> 
  
</html>

输出：

der

支持的浏览器

  • chrome 1
  • 边 12
  • 狩猎4
  • 火狐1
  • Opera 15


相关用法


注：本文由纯净天空筛选整理自pankaj_gupta_gfg大神的英文原创作品 HTML <iframe> Tag。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。