一、iframe是什么
我的理解iframe就是在html的页面里再嵌入一个html页面。
二、iframe页面代码:
<iframe id="ifr" name="ifr" src="cp/transparent.html"
style="width:150px;height:100px;" allowtransparency="true" frameborder="0">
</iframe>
浏览器解析后的代码:
<iframe id="ifr" frameborder="0" allowtransparency="true" style="width: 150px; height: 100px;"
src="cp/transparent.html" name="ifr">
<html>
<head>
<style type="text/css">
html,body {
background-color: transparent;
}
</style>
</head>
<body/>
</html>
</iframe>
页面cp/transparent.html的代码:
<style type="text/css">
html,body {
background-color: transparent;
}
</style>
三、iframe的特点:
有两种方法得到iframe,但他们是完全不同的。
方法一:document.getElementById(“ifr”); //得到的是一个object
方法二:window.frames[“ifr”]; //得到的是一个完整的DOM模型
如果只想改变iframe的 src 或者 border , scrolling 等 attributes就需要用到第一种方法.(值得说明的是,
attributes与property不是一个概念,property是不能写在标签内的,比如:scrollHeight,innerHTML等);
如果想取得iframe的页面(不是iframe本身)或者想改变property,就需要使用第二种方法,因为它取得的是一个完整
的DOM模型,比如想得到iframe的document.body的内容,就只能用第二种方法.
四、简单举例
如果想用js将一些文字写入到iframe的页面里就需要写成这样:
window.frames['ifr'].document.getElementsByTagName('body')[0].innerHTML="Hello World!";
五、Note
注意的是,如果在iframe的页面未完全装入的时候,调用iframe的DOM模型,会发生很严重的错误,所以,你要准备一个
容错模式.
此外,可以登陆http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html 去了解更多关于iframe的属性的应用。