HTML 的 iframe 使用

作者：黎燃

2022 年 5 月 09 日
本文字数：903 字
阅读完需：约 3 分钟

IFRAME 是 HTML 标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

定义和用法

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

HTML 与 XHTML 之间的差异

在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。TIY 实例

<html>
<body>
<iframe src="/i/eg_landscape.jpg"></iframe>
<p>一些老的浏览器不支持 iframe。</p><p>如果得不到支持，iframe 是不可见的。</p>

</body></html>

复制代码

提示和注释

提示：HTML 与 XHTML 之间的差异：在 HTML4.1 Strict DTD 和 XHTML1.0 Strict DTD 中，不支持 iframe 元素。可以把需要的文本放置在<iframe>和</iframe>之间，这样就可以应对无法理解 iframe 的浏览器。

iframe 常用属性:

1.frameborder:是否显示边框，1(yes),0(no)2.height:框架作为一个普通元素的高度，建议在使用 css 设置。3.width:框架作为一个普通元素的宽度，建议使用 css 设置。4.name:框架的名称，window.frames[name]时专用的属性。5.scrolling:框架的是否滚动。yes,no,auto。6.src：内框架的地址，可以使页面地址，也可以是图片的地址。7.srcdoc , 用来替代原来 HTML body 里面的内容。但是 IE 不支持, 不过也没什么卵用 8.sandbox: 对 iframe 进行一些列限制，IE10+支持

我们通常使用 iframe 最基本的特性，就是能自由操作 iframe 和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转

获取 iframe 里的内容

主要的两个 API 就是 contentWindow,和 contentDocumentiframe.contentWindow, 获取 iframe 的 window 对象 iframe.contentDocument, 获取 iframe 的 document 对象这两个 API 只是 DOM 节点提供的方式(即 getELement 系列对象)

var iframe = document.getElementById("iframe1");var iwindow = iframe.contentWindow;var idoc = iwindow.document;       console.log("window",iwindow);//获取iframe的window对象       console.log("document",idoc);  //获取iframe的document       console.log("html",idoc.documentElement);//获取iframe的html       console.log("head",idoc.head);  //获取head       console.log("body",idoc.body);  //获取body

复制代码

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/b4af54a8a2c26389031458159】。文章转载请联系作者。

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景