文
章
目
录
章
目
录
HTML Iframe 用于显示嵌套的网页(一个网页嵌套在另一个网页内部)。HTML <iframe> 标签定义了内联框架,因此它也被称为内联框架。
HTML iframe 将另一个文档嵌入到当前 HTML 文档中的矩形区域中。
网页内容和 iframe 内容可以使用 JavaScript 互相交互。
Iframe 语法 HTML iframe 由 <iframe> 标签定义:
<iframe src="URL"></iframe>
在这里,“src” 属性指定了内联框架页面的 Web 地址(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://www.panziye.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.panziye.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.panziye.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.panziye.com/" style="border:none;"></iframe>
</body>
</html>
您还可以更改 iframe 边框的大小、颜色和样式。
示例:
<!DOCTYPE html>
<html>
<body>
<h2>Custom Iframe Border</h2>
<iframe src="https://www.panziye.com/" 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://www.panziye.com" target="iframe_a">panziye.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>
使用 iframe 嵌入 B站 视频
您还可以使用 <iframe> 标签在网页上添加 B站视频。附加的视频将在您的网页上播放,您还可以设置视频的高度、宽度、自动播放和其他属性。
详情请参考:个人站点引用bilibili、优酷视频资源网站视频的方法
<iframe>属性
属性名 | 值 | 描述 |
---|---|---|
allowfullscreen | true | 如果为true,则该框架可以全屏打开。 |
height | 像素 | 定义嵌入iframe的高度,默认高度为150像素。 |
name | 文本 | 为iframe指定名称。如果想在一个框架中创建链接,name属性非常重要。 |
frameborder | 1或0 | 定义iframe是否应具有边框。(不支持HTML5)。 |
width | 像素 | 定义嵌入框架的宽度, 默认宽度为300像素。 |
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显示滚动条。 |