<iframe>标签
- 2019 年 11 月 29 日
- 筆記
用途
<iframe> 标签(又称内联框架元素)表示了一个嵌套的浏览上下文(browsing context),实际上是用来在当前页面中内嵌另一个HTML页面。
例子
<iframe src="./iframe"></iframe>
标准属性
属性 |
描述 |
H5新 |
---|---|---|
height |
像素格式,或百分比格式指定frame的高度。 |
|
name |
像素格式,或百分比格式指定frame的高度。 |
|
sandbox |
启用一系列对<iframe>中内容的额外限制。allow-same-origin: 允许将内容作为普通来源对待。如果未使用该关键字,嵌入的内容将被视为一个独立的源。link(拖动数据会产生指向原始数据的链接)。allow-top-navigation:嵌入的页面的上下文可以导航(加载)内容到顶级的浏览上下文环境(browsing context)。如果未使用该关键字,这个操作将不可用。allow-forms: 允许嵌入的浏览上下文可以提交表单。如果该关键字未使用,该操作将不可用allow-scripts: 允许嵌入的浏览上下文运行脚本(但不能window创建弹窗)。如果该关键字未使用,这项操作不可用。 |
✔ |
seamless |
规定 <iframe> 渲染成是容器页面文档的一部分。 |
✔ |
src |
嵌套页面的URL地址。 |
|
srcdoc |
规定在 <iframe> 中显示的页面的 HTML 内容。 |
✔ |
width |
像素格式,或以百分比格式指定frame的宽度。 |
|
- allow-same-origin: 允许将内容作为普通来源对待。如果未使用该关键字,嵌入的内容将被视为一个独立的源。
- link(拖动数据会产生指向原始数据的链接)。
- allow-top-navigation:嵌入的页面的上下文可以导航(加载)内容到顶级的浏览上下文环境(browsing context)。如果未使用该关键字,这个操作将不可用。
- allow-forms: 允许嵌入的浏览上下文可以提交表单。如果该关键字未使用,该操作将不可用
- allow-scripts: 允许嵌入的浏览上下文运行脚本(但不能window创建弹窗)。如果该关键字未使用,这项操作不可用。
✔seamless规定 <iframe> 渲染成是容器页面文档的一部分。✔src嵌套页面的URL地址。 srcdoc规定在 <iframe> 中显示的页面的 HTML 内容。✔width像素格式,或以百分比格式指定frame的宽度。
变更点
<iframe> 标签在HTML5与HTML4.01之间存在如下差异
- HTML5有一些新的属性,同时不再支持以下的HTML4.01属性
- longdesc 规定一个页面,该页面包含了有关 iframe 的较长描述。
- marginheight 框架内容到框架的上下边距,以像素格式表示。
- marginwidth 规定是否在 iframe 中显示滚动条。
- scrolling 原用于指定目标 URL 与当前文档之间的关系。
表格资料: