摘要 :
文章目录 设置 iframe 的宽度和高度 示例：（像素） 示例：（百分比） 删除 iframe 的边框 为链接设置 iframe 目标 使用 iframe 嵌入 B站 视频 <iframe>属性 H……
文
章
目
录
- 设置 iframe 的宽度和高度
- 示例：（像素）
- 示例：（百分比）
- 删除 iframe 的边框
- 为链接设置 iframe 目标
- 使用 iframe 嵌入 B站 视频
- <iframe>属性
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显示滚动条。 |
还没有评论呢，快来抢沙发~