• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <iframe>

    HTML内联框架元素(<iframe>)表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。

    浏览器支持

    所有主流浏览器都支持<iframe>标签。

    示例

    标记一个内联框架:

    <iframe src="https://www.lanmper.cn"></iframe>

    标签定义及使用说明

    • <iframe>标签创建包含另一个文档的行内框架,被用来在当前 HTML 文档中嵌入另一个文档。
    • 可以把需要的文本放置在<iframe></iframe>之间,这样就可以应对不支持<iframe>的浏览器。
    • 使用 CSS 为<iframe>(包括滚动条)定义样式。

    脚本

    内联的框架,就像<frame>元素一样,会被包含在window.frames伪数组(类数组的对象)中。

    有了DOMHTMLIFrameElement对象,脚本可以通过contentWindow访问内联框架的window对象。contentDocument属性则引用了<iframe>内部的document元素,(等同于使用contentWindow.document),但IE8-不支持。

    在框架内部,脚本可以通过window.parent引用父窗口对象。

    脚本访问框架内容必须遵守同源策略,并且无法访问非同源的window对象的几乎所有属性。同源策略同样适用于子窗体访问父窗体的window对象。跨域通信可以通过window.postMessage来实现。

    定位和缩放

    作为一个可替换元素,可以使用object-positionobject-fit来定位、对齐、缩放<iframe>元素内的文档。

    属性

    属性描述
    alignleft
    right
    top
    middle
    bottom
    HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐<iframe>
    frameborder1
    0
    HTML5 不支持。规定是否显示<iframe>周围的边框。
    heightpixels规定<iframe>的高度。
    longdescURLHTML5 不支持。规定一个页面,该页面包含了有关<iframe>的较长描述。
    marginheightpixelsHTML5 不支持。规定<iframe>的顶部和底部的边距。
    marginwidthpixelsHTML5 不支持。规定<iframe>的左侧和右侧的边距。
    namename规定<iframe>的名称。
    sandbox HTML5新增""
    allow-forms
    allow-same-origin
    allow-scripts
    allow-top-navigation
    <iframe>的内容定义一系列额外的限制。
    scrollingyes
    no
    auto
    HTML5 不支持。规定是否在<iframe>中显示滚动条。
    seamless HTML5新增seamless规定<iframe>看起来像是父文档中的一部分。
    srcURL规定在<iframe>中显示的文档的 URL。
    srcdoc HTML5新增HTML_code规定页面中的 HTML 内容显示在<iframe>中。
    widthpixels规定<iframe>的宽度。

    HTML 4.01 与 HTML 5 之间的差异

    HTML5 新增了一些新的属性,同时去掉了 HTML 4.01 中的一些属性。

    HTML 与 XHTML 之间的差异

    在 XHTML 中,name 属性已被废弃,并将被去掉。请使用 id 属性代替。

    全局属性

    <iframe>标签支持HTML 的全局属性。

    事件属性

    <iframe>标签支持HTML 的事件属性。

    无障碍环境

    使用<iframe>的title属性来标识框架的主要内容,这样可以极大方便使用辅助技术(例如屏幕阅读器)浏览网页的人。框架的标题应该清楚地描述框架的内容,例如:

    <iframe title="wikipedia page for avocados" src="https://en.wikipedia.org/wiki/avocado"></iframe>

    如果没有标题,他们就只能浏览每一个框架来获取需要的内容。这非常耗时间,也很容易让人迷惑,尤其是当页面中包含很多框架或者互动内容如音视频等的时候。

    例子

    <iframe src="/index.html"></iframe>
    

    下面的例子中,我们创建了一个框架。当用户点击框架中的按钮时,浏览器会弹出一个提示框。

    <iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe example 1" width="400" height="300">
      <p>your browser does not support iframes.</p>
    </iframe>

    下面的例子演示了在框架中展示谷歌地图。

    <base target="_blank">
    <iframe id="example2"
        title="example2"
        width="400"
        height="300"
        frameborder="0"
        scrolling="no"
        marginheight="0"
        marginwidth="0"
        src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=utf8&amp;hq=&amp;hnear=buenos+aires,+argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed">
    </iframe>
    
    <br>
    <small>
      <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=utf8&amp;hq=&amp;hnear=buenos+aires,+argentina&amp;z=11&amp;ll=-34.603723,-58.381593" style="color:#0000ff;text-align:left"> see bigger map </a>
    </small>

    上篇:<embed>

    下篇:<picture>