HTML的iframe使用

简介: HTML的iframe使用

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

定义和用法

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

HTML 与 XHTML 之间的差异

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

<html>

<body>

frameLabelStart--frameLabelEnd 

<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持,iframe 是不可见的。</p>


</body>
</html>

提示和注释

提示:HTML 与 XHTML 之间的差异:在HTML4.1 Strict DTD和XHTML1.0 Strict DTD中,不支持iframe元素。
可以把需要的文本放置在frameLabelStart--frameLabelEnd 之间,这样就可以应对无法理解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,和contentDocument
iframe.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
相关文章
|
JavaScript 大数据 BI
Superset图表通过iframe嵌入Html网页展示一文详解
Superset图表通过iframe嵌入Html网页展示一文详解
1899 0
Superset图表通过iframe嵌入Html网页展示一文详解
|
JavaScript
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
1860 0
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
|
6月前
HTML中的<iframe>标签及其属性
HTML中的<iframe>标签及其属性
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
该博客文章详细介绍了HTML的基础知识,包括注释、标签属性、常用标签、实体、图片引入、meta标签、内联框架、超链接的使用,并通过代码示例和测试结果截图展示了这些元素在网页中的应用效果。
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
|
7月前
|
安全 测试技术 定位技术
html iframe 框架有哪些优缺点?
html iframe 框架有哪些优缺点?
94 1
|
安全 UED
HTML <iframe> 标签的常用属性--详解(附加代码)
HTML <iframe> 标签的常用属性--详解(附加代码)
180 0
|
数据采集 前端开发 搜索推荐
html的iframe属性
html的iframe属性
154 0
|
移动开发 JavaScript 前端开发
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
152 0
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
|
移动开发 Java HTML5
HTML5 学习10.iframe内联框架
HTML5 学习10.iframe内联框架
|
Web App开发 JavaScript