天天看点

HTML的iframe使用

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常用属性:

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对象

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      

继续阅读