现代网页开发中，<iframe> 标签是一个非常重要的工具。允许我们在一个网页中嵌入另一个网页，对于展示外部内容、应用嵌套或实现复杂的布局设计都非常有用。来一起探讨如何使用 iframe 标签，包括设置高度和宽度、移除边框，以及如何用 iframe 来显示目标链接页面。
一、了解 <iframe> 标签
<iframe> 标签是 HTML5 中的一部分，用于嵌入另一个 HTML 页面到当前页面中。它的基本语法如下：
<iframe src="URL" width="宽度" height="高度" frameborder="边框"></iframe>
-
src 属性指定要嵌入的网页的 URL。 -
width 和 height 属性用于设置 iframe 的宽度和高度。 -
frameborder 属性用于设置 iframe 的边框宽度。
二、设置 iframe 的高度与宽度
使用 <iframe> 标签时，可以通过 width 和 height 属性来控制其显示的尺寸。设置这两个属性的值通常有两种方式：像素值（例如 600px）和百分比值（例如 100%）。
示例 1：固定尺寸的 iframe
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fixed Size iFrame</title> </head> <body> <iframe src="https://www.baidu.com" width="800" height="600" style="border: none;"></iframe> </body> </html>
在这个示例中，创建了一个宽800像素、高600像素的 iframe。通过在 style 属性中设置 border: none;，去除了边框的显示。
示例 2：响应式 iframe
为了使 iframe 自适应容器的宽度，我们可以使用百分比值。下面的示例展示了如何创建一个宽度为页面宽度的100%的 iframe，高度为容器宽度的50%。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive iFrame</title> <style> .iframe-container { position: relative; width: 100%; padding-top: 50%; /* 16:9 aspect ratio */ } .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } </style> </head> <body> <div class="iframe-container"> <iframe src="https://www.baidu.com"></iframe> </div> </body> </html>
这个示例中，使用了一个包含 iframe 的容器 div。通过设置容器的 padding-top，能够保持 iframe 的纵横比为16:9，并且使其自适应页面宽度。
三、移除 iframe 的边框
默认情况下，许多浏览器会为 iframe 显示边框。可以通过设置 frameborder 属性或使用 CSS 来移除这些边框。
示例 1：使用 frameborder 属性
<iframe src="https://www.baidu.com" width="600" height="400" frameborder="0"></iframe>
设置 frameborder 属性为 0 可移除边框。这种方法已被 HTML5 弃用，建议使用 CSS。
示例 2：使用 CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>iFrame without Border</title> <style> iframe { border: none; } </style> </head> <body> <iframe src="https://www.baidu.com" width="600" height="400"></iframe> </body> </html>
这个示例中，通过 CSS 中的 border: none; 去除了 iframe 的边框。这是移除边框的推荐方法，符合现代浏览器的标准。
四、使用 iframe 来显示目标链接页面
iframe 最常见的用途之一就是嵌入外部链接。这可以用来展示来自其他网站的内容，比如视频、地图或者其他信息。使用 iframe 时，需要注意目标网站的安全策略，有些网站可能会阻止被嵌入。
示例 1：嵌入 Gaode Maps
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Embedding Gaode Maps</title> <style> html, body { margin: 0; height: 100%; overflow: hidden; } iframe { width: 100%; height: 100%; border: 0; } </style> </head> <body> <h1 style="position: absolute; top: 0; left: 0; width: 100%; text-align: center; background-color: rgba(255, 255, 255, 0.8);">My Favorite Place</h1> <iframe src="https://www.amap.com/place/B0FFK8OQLY" allowfullscreen loading="lazy"></iframe> </body> </html>
这个示例中，嵌入了 Gaode Maps 的一部分，展示了小麦岛公园的地图。通过 style="border:0;" 去除了边框，allowfullscreen 属性使地图可以全屏显示。
示例 2：嵌入 Bilibili 视频
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Embedding Bilibili Video</title> <style> html, body { margin: 0; height: 100%; overflow: hidden; } .iframe-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } iframe { width: 100%; height: 100%; border: none; } </style> </head> <body> <h1>Watch this Video</h1> <div class="iframe-container"> <iframe src="https://www.bilibili.com/video/BV1m441117Rb/?spm_id_from=333.337.search-card.all.click&vd_source=5dbd7e9d52229e38b46b7897ed6034f2" title="Bilibili video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </body> </html>
这个示例中，嵌入了一个 Bilibili 视频。设置了 allowfullscreen 属性，允许用户将视频全屏观看。
注意：
出于有些网页不希望被嵌套, 响应头中有一选项
X-Frame-Options
他有三个可配置值
DENY：表示该网站页面不允许被嵌套，即便是在自己的域名的页面中也不能进行嵌套。
SAMEORIGIN：表示该页面可以在相同域名页面中被嵌套展示。
ALLOW-FROM uri：表示该页面可以在指定来源页面中进行嵌套展示。
如有表述错误及欠缺之处敬请批评指正。
