您好！欢迎来到鲲鹏知舟

通行证注册 | 登录登录

Home

HTML

HTML5

CSS

SVN

Colors

HarmonyOS

区块链

人工智能

C语言

C++

C#

魔圈

社区

HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

浏览器显示页面内容的屏幕区域viewport..

HTML 面试问题

HTML 框架

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

HTML iframe 在矩形区域的当前 HTML 文档中嵌入另一个文档。

网页内容和 iframe 内容可以使用 JavaScript 进行交互。

iframe 语法

HTML iframe 使用 <iframe> 标签定义：

<iframe src= "URL" ></iframe>

此处，“src”属性指定内嵌框架页面的网址 (URL)。

设置 iframe 的宽度和高度

您可以使用“宽度”和“高度”属性设置 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://www.rocschool.com/"; 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://www.rocschool.com/"; 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://www.rocschool.com/"; style="height:300px;width:400px"></iframe>    
</body>    
</html>

去除iframe的边框

默认情况下，iframe 包含一个围绕它的边框。您可以使用 <style> 属性和 CSS 边框属性删除边框。

例子：

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

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

例子：

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

链接的 iframe 目标

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

例子：

<!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://www.rocschool.com"; 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>

输出

HTML iframe

new.hmtl 输出代码：

<!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 ifarme click on link to open new iframe. </p>
</body>
</html>

使用 iframe 嵌入 YouTube 视频

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

以下是在您的网页上添加 YouTube 视频的一些步骤：

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

例子：

<!DOCTYPE html>
<html>
   <head>
	  <style>
		h3{text-align: center;
			font-size: 50px;
			color: red;}
		p{font-size: 20px;
			color: green;
			font-weight: bold;}
	 </style>
       </head>
      <body style="background-color: #f0f8ff">
		<h3>Play videos using iframe</h3>
		<iframe width="550" height="315" src="https://www.youtube.com/embed/JHq3pL4cdy4"; frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="padding:20px;"></iframe>

        <iframe width="550" height="315" src="https://www.youtube.com/embed/O5hShUO6wxs"; frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" style="padding:20px;">></iframe>
        <p>In first video full screen is available and in second video full screen is not available</p>
   </body>
 </html>

输出：