写点什么

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
用户头像

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

评论

发布
暂无评论
HTML的iframe使用_5月月更_黎燃_InfoQ写作社区