HTML 框架

2025 年 8 月 26 日 | 阅读 5 分钟

HTML 框架 (iframe) 用于显示一个嵌套的网页（一个网页中的网页）。HTML <iframe> 标签定义了一个内联框架，因此它也被称为内联框架。

HTML 框架 (iframe) 在当前 HTML 文档的矩形区域内嵌入另一个文档。网页内容和框架内容可以通过 JavaScript 相互交互。

注意：现代 Web 开发通常出于用户体验/安全原因避免使用 iframe 进行导航。更安全/更现代的方法是根据用例通过 API 或 <object> 嵌入内容。

iframe 语法

HTML 框架 (iframe) 使用 <iframe> 标签定义。

在这里，"src" 属性指定内联框架页面的网址（URL）。

设置 iframe 的宽度和高度

您可以使用 "width" 和 "height" 属性来设置 iframe 的宽度和高度。默认情况下，属性值以像素为单位指定，但您也可以将其设置为百分比。即 50%、60% 等。

示例：(像素)

示例：(像素)

<!DOCTYPE html>    
<html>    
<body>    
<h2> HTML iframes example </h2>    
<p> Use the height and width attributes to specify the size of the iframe: </p>    
<iframe src="https://tpointtech.cn/" height="300" width="400"> </iframe>    
</body>    
</html> 

执行代码

输出

示例：(百分比)

<!DOCTYPE html>  
<html>  
<body>  
<h2>HTML Iframes</h2>  
<p>You can use the height and width attributes to specify the size of the iframe:</p>  
<iframe src="https://tpointtech.cn/" height="50%" width="70%"></iframe>  
</body>  
</html>  

执行代码

输出

您还可以使用 CSS 来设置 iframe 的高度和宽度。

示例

<!DOCTYPE html>  
<html>  
<body>  
<h2>HTML Iframes</h2>  
<p>Use the CSS height and width properties to specify the size of the iframe:</p>  
<iframe src="https://tpointtech.cn/" style="height:300px;width:400px"></iframe>  
</body>  
</html>  

执行代码

输出

移除 iframe 的边框

默认情况下，iframe 周围有一个边框。您可以使用 <style> 属性和 CSS border 属性来移除边框。

示例

<!DOCTYPE html>  
<html>  
<body>  
<h2>Remove the Iframe Border</h2>  
<p>This iframe example doesn't have any border</p>   
<iframe src="https://tpointtech.cn/" style="border:none;"></iframe>  
</body>  
</html>  

执行代码

输出

您还可以更改 iframe 边框的大小、颜色和样式。

示例

<!DOCTYPE html>  
<html>  
<body>  
<h2>Custom Iframe Border</h2>  
<iframe src="https://tpointtech.cn/" style="border:2px solid tomato;"></iframe>  
</body>  
</html>  

执行代码

输出

链接的 iframe 目标

您可以使用框架 (iframe) 为链接设置目标框架。您指定的链接的目标属性必须引用框架 (iframe) 的 name 属性。

示例

<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>
<iframe height="300px" width="100%" src="new.html" name="iframe_a"></iframe>
<p><a href="https://tpointtech.cn" target="iframe_a">JavaTpoint.com</a></p>
<p>The name of iframe and link target must have same value else link will not open as a frame. </p>

</body>
</html>

执行代码

输出

输出 (new.html)

<!DOCTYPE html>
<html>
<head>
<style>

p{ font-size: 50px;
color: red;}
</style>
</head>
<body style="background-color: #c7f15e;">
<p>This is a link below the iframe. Click on the link to open a new iframe. </p>
</body>
</html>

使用 iframe 嵌入 YouTube 视频

您还可以使用 <iframe> 标签将 YouTube 视频添加到您的网页。附加的视频将在您的网页上播放，您还可以为视频设置高度、宽度、自动播放以及更多属性。

以下是将 YouTube 视频添加到您的网页的步骤：

转到您想要嵌入的 YouTube 视频。
点击视频下方的“分享” ➦。
点击“嵌入” <> 选项。
复制 HTML 代码。
将代码粘贴到您的 HTML 文件中
更改高度、宽度和其他属性（根据需要）。

示例 1

<iframe width="550" height="315" 
src="https://www.youtube.com/embed/qvr6hxXGXwE" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen> </iframe> 

示例 2

<iframe width="550" height="315" 
src="https://www.youtube.com/embed/B3i0LYiJ-x8" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
style="border:0; padding:20px;"> 
</iframe>  

输出

<iframe> 标签的属性

属性名称	值	描述
allowfullscreen		布尔属性。它不接受 true/false；它只启用全屏。
高度	像素	它定义了嵌入式 iframe 的高度，默认高度为 150 px。
name	text	它为 iframe 命名。如果您想在其中一个框架中创建链接，name 属性很重要。
frameborder (框架边框)	1 或 0	它定义了 iframe 是否应具有边框（HTML5 不支持）。
宽度	像素	它定义了嵌入式框架的宽度，默认宽度为 300 px。
src	URL	src 属性用于提供要加载到 iframe 中的内容的路径名或文件名。
sandbox
		此属性用于对框架内容应用额外的限制。
	allow-forms	它允许提交表单；如果未使用此关键字，则会阻止表单提交。
	allow-popups	它将启用弹出窗口，如果不应用，则不会打开任何弹出窗口。
	allow-scripts	它将允许脚本运行。
	allow-same-origin	如果使用此关键字，则嵌入式资源将被视为从同一来源下载。
	srcdoc	srcdoc 属性用于在内联 iframe 中显示 HTML 内容。它会覆盖 src 属性（如果浏览器支持）。
scrolling (滚动条)
		它指示浏览器是否应为 iframe 提供滚动条（HTML5 不支持）。
	auto	仅当 iframe 内容大于其尺寸时，滚动条才会显示。
	是	始终为 iframe 显示滚动条。
	否	从不为 iframe 显示滚动条。

安全注意事项

除非以正确的方式处理，否则使用 iframe 可能会带来安全风险。例如，使用嵌入外部网站的内容可能会带来点击劫持或脚本注入的风险。为了应对这些

使用 sandbox 属性来限制框架的行为（阻止脚本、表单或弹出窗口）。
永远不要将未经验证的来源悬空作为 src、域名等。
将沙盒与允许属性的能力集成，以实现更精确的控制。

<iframe src=" https://tpointtech.cn" sandbox="allow-scripts allow-same-origin"> </iframe>

响应式 iframe

默认情况下，iframe 无法跨设备调整大小。要使其响应式，请使用百分比和宽高比进行样式设置（或在旧版浏览器上使用 padding 方法）。

示例（使用 aspect-ratio）

<iframe src="https://youtu.be/B3i0LYiJ-x8" 
        style="width:100%; aspect-ratio:16/9; border:0;" 
        allowfullscreen> </iframe>

说明

这可确保 iframe 能够适应手机、平板电脑和桌面屏幕。

使用 srcdoc 属性

srcdoc 属性与 src 属性类似，但它允许您将自己的内联内容作为 iframe 的一部分编写，而不是加载文件。当浏览器支持此属性时，它会替换 src 属性。

示例

<iframe srcdoc="<p style='color:blue;'>Hello from inside the iframe! </p>"> </iframe>

这在测试或嵌入某些自定义内容时可能会派上用场。

跨域通信 (postMessage)

父页面和 iframe 内容需要在安全上下文中相互交互；不要直接访问 DOM（这将被同源策略阻止）。改用 postMessage API。

父页面

iframe 页面

window.addEventListener("message", (event) => {
  console.log("Message from parent:", event.data);
});

这个技巧在许多应用程序中很常见（例如，嵌入支付表单、小部件）。

结论

使用 HTML 嵌入的框架 (iframe) 是一个非常强大且有用的功能。它们用于嵌入外部内容，如网页、视频和小部件。它们方便且灵活，但即使在当今的 Web 开发环境中，也需要高度关注响应性、安全性和可访问性。沙盒 (Sandboxing)、srcdoc、postMessage 和响应式 CSS 技术使当今的框架 (iframe) 在 Web 开发中更加安全和灵活。遵循最佳实践，开发人员可以确保框架 (iframe) 能够改善用户体验，而不会对性能和安全性产生负面影响。

下一个主题HTML JavaScript

← 上一个下一个 →

HTML 框架

注意：现代 Web 开发通常出于用户体验/安全原因避免使用 iframe 进行导航。更安全/更现代的方法是根据用例通过 API 或 <object> 嵌入内容。

iframe 语法

设置 iframe 的宽度和高度

示例：(像素)

示例：(百分比)

示例

移除 iframe 的边框

示例

示例

链接的 iframe 目标

示例

使用 iframe 嵌入 YouTube 视频

示例 1

示例 2

<iframe> 标签的属性

安全注意事项

响应式 iframe

使用 srcdoc 属性

跨域通信 (postMessage)

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 框架

注意：现代 Web 开发通常出于用户体验/安全原因避免使用 iframe 进行导航。更安全/更现代的方法是根据用例通过 API 或 <object> 嵌入内容。

iframe 语法

设置 iframe 的宽度和高度

示例：(像素)

示例：(百分比)

示例

移除 iframe 的边框

示例

示例

链接的 iframe 目标

示例

使用 iframe 嵌入 YouTube 视频

示例 1

示例 2

<iframe> 标签的属性

安全注意事项

响应式 iframe

使用 srcdoc 属性

跨域通信 (postMessage)

结论

相关帖子

HTML 图片

HTML 标签

HTML JavaScript

HTML 符号

HTML Head

HTML 短语标签

HTML 无序列表

HTML 与 CSS

什么是 HTML

HTML 表格

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器