百科狗- 内联框架 - html5 内嵌内容
HTML内联框架元素()表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。
浏览器支持
所有主流浏览器都支持 |
示例
标记一个内联框架：
标签定义及使用说明
标签创建包含另一个文档的行内框架，被用来在当前 HTML 文档中嵌入另一个文档。- 可以把需要的文本放置在
和之间，这样就可以应对不支持的浏览器。 - 使用 CSS 为
（包括滚动条）定义样式。
脚本
内联的框架，就像元素一样，会被包含在window.frames伪数组（类数组的对象）中。
有了DOMHTMLIFrameElement对象，脚本可以通过contentWindow访问内联框架的window对象。contentDocument属性则引用了内部的document元素，(等同于使用contentWindow.document），但IE8-不支持。
在框架内部，脚本可以通过window.parent引用父窗口对象。
脚本访问框架内容必须遵守同源策略，并且无法访问非同源的window对象的几乎所有属性。同源策略同样适用于子窗体访问父窗体的window对象。跨域通信可以通过window.postMessage来实现。
定位和缩放
作为一个可替换元素，可以使用object-position和object-fit来定位、对齐、缩放元素内的文档。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | left right top middle bottom | HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐 |
| frameborder | 1 0 | HTML5 不支持。规定是否显示 |
| height | pixels | 规定 |
| longdesc | URL | HTML5 不支持。规定一个页面，该页面包含了有关 |
| marginheight | pixels | HTML5 不支持。规定 |
| marginwidth | pixels | HTML5 不支持。规定 |
| name | name | 规定 |
| sandbox HTML5新增 | "" allow-forms allow-same-origin allow-scripts allow-top-navigation | 对 |
| scrolling | yes no auto | HTML5 不支持。规定是否在 |
| seamless HTML5新增 | seamless | 规定 |
| src | URL | 规定在 |
| srcdoc HTML5新增 | HTML_code | 规定页面中的 HTML 内容显示在 |
| width | pixels | 规定 |
HTML 4.01 与 HTML 5 之间的差异
HTML5 新增了一些新的属性，同时去掉了 HTML 4.01 中的一些属性。
HTML 与 XHTML 之间的差异
在 XHTML 中，name 属性已被废弃，并将被去掉。请使用 id 属性代替。
全局属性
标签支持HTML 的全局属性。
事件属性
标签支持HTML 的事件属性。
无障碍环境
使用的title属性来标识框架的主要内容，这样可以极大方便使用辅助技术（例如屏幕阅读器）浏览网页的人。框架的标题应该清楚地描述框架的内容，例如：
如果没有标题，他们就只能浏览每一个框架来获取需要的内容。这非常耗时间，也很容易让人迷惑，尤其是当页面中包含很多框架或者互动内容如音视频等的时候。
例子
下面的例子中，我们创建了一个框架。当用户点击框架中的按钮时，浏览器会弹出一个提示框。
your browser does not support iframes.
下面的例子演示了在框架中展示谷歌地图。
see bigger map
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
