HTML Iframe 详解
HTML基础 2022-05-19 16:59:47小码哥的IT人生shichen
HTML Iframe
iframe 用于在网页内显示网页。
添加 iframe 的语法
<iframe src="URL"></iframe>
URL 指向隔离页面的位置。
Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
示例代码：
<iframe src="/news/1.html" width="200" height="200"></iframe>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<iframe src="/news/1.html" width="200" height="200"></iframe>
<p>某些老式的浏览器不支持内联框架。</p>
<p>如果不支持，则 iframe 是不可见的。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 "0" 就可以移除边框：
示例代码：
<iframe src="/news/1.html" frameborder="0"></iframe>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<iframe src="/news/1.html" frameborder="0"></iframe>
<p>某些老式的浏览器不支持内联框架。</p>
<p>如果不支持，则 iframe 是不可见的。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：
示例代码：
<iframe src="/news/1.html" name="iframe_a"></iframe>
<p><a href="http://www.phpcodeweb.com" target="iframe_a">phpcodeweb.com</a></p>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<iframe src="/news/1.html" name="iframe_a"></iframe>
<p><a href="http://www.phpcodeweb.com" target="iframe_a">phpcodeweb.com</a></p>
<p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HTML iframe 标签
| 标签 | 描述 |
|---|---|
| <iframe> | 定义内联的子窗口（框架） |
