1 iframe框架简介
- 作用:标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
- 可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对不支持 <iframe> 的浏览器。
- 使用 CSS 为 <iframe>(包括滚动条)定义样式。
- 语法示例:
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<iframe src="//www.runoob.com">
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
</body>
</html>
2 iframe常用属性
2.1 name属性
- 作用:规定 <iframe> 的名称:
- 用于在 JavaScript 中引用元素;
- 作为<a>或<form>元素的 target 属性的值;
- 或者作为 <input> 或 <button> 的 formtarget 属性的值。
- 语法:
<iframe name="name">
2.2 src属性
- 作用:规定嵌入在 <iframe> 中的文档的地址。
- 语法:
<iframe src="URL">
- 可能的值:
- 绝对 URL - 指向另一个网站(比如 src=“http://www.example.com/default.htm”)
- 相对 URL - 指向网站中的一个文件(比如 src=“default.htm”)
2.3 width属性
- 作用:规定<iframe>的宽度,以像素计。
- 语法:
<iframe width="pixels">
。 - 取值:以像素为单位的内联框架的高度(比如 “100px”)。
- 注意:在HTML 4.01中,宽度应该被定义为以像素为单位或者以包含元素的百分比为单位。在 HTML5中,宽度值必须以像素为单位。
2.4 height属性
- 作用:规定<iframe>的高度,以像素计。
- 语法:
<iframe height="pixels">
。 - 取值:以像素为单位的内联框架的高度(比如 “100px”)。
- 注意:在 HTML 4.01 中,高度应该被定义为以像素为单位或者以包含元素的百分比为单位。在 HTML5 中,高度值必须以像素为单位。
2.5 其他
其他属性如seamless、sandbox等请参考《HTML<iframe>标签》。
3 总结
- 了解iframe的作用;
- 掌握iframe常用属性的作用及用法。