个性化阅读
专注于IT技术分析

HTML iframe用法

点击下载

本文概述

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.srcmini02.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.srcmini02.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.srcmini02.com/" 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://www.srcmini02.com/" style="border:none;"></iframe>  
</body>  
</html>

立即测试

你还可以更改iframe边框的大小, 颜色, 样式。

例:

<!DOCTYPE html>  
<html>  
<body>  
<h2>Custom Iframe Border</h2>  
<iframe src="https://www.srcmini02.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.srcmini02.com" target="iframe_a">srcmini02.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视频。
  • 单击视频下方的SHARE SHA。
  • 单击嵌入<>选项。
  • 复制HTML代码。
  • 将代码粘贴到HTML文件中
  • 更改高度, 宽度和其他属性(根据要求)。

例:

<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>

立即测试

输出:

HTML iframe

<iframe>的属性

属性名称 描述
allowfullscreen 如果为true, 则可以全屏打开该框架。
height Pixels 它定义了嵌入式iframe的高度, 默认高度为150像素。
name text 它为iframe命名。如果要在一帧中创建链接, 则name属性很重要。
frameborder 1或0 它定义iframe是否应具有边框。 (HTML5不支持)。
Width Pixels 它定义嵌入框架的宽度, 默认宽度为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的内容是否大于其尺寸。
yes 始终显示iframe的滚动条。
no 从不显示iframe的滚动条。
赞(0)
未经允许不得转载:srcmini » HTML iframe用法

评论 抢沙发

评论前必须登录!