iframe是一个非常有用的标签,先不说早期用它来模型Ajax效果,现在富本文编辑器它也绝对是主角。但是它又是一个特别的元素,最早出现 IE4.0中,后纷纷被其他游览器吸纳,由于IE不开源,iframe在各游览器中都有很大差异。首先我们看看它在各游览器中拥有什么属性——
通常要隐藏iframe的边框时需要用到frameborder属性,例如使用Dreamweaver可以生成如下代码:
<iframe frameborder=0 src= 'xxxx' width= 'xxx' height= 'xxx' ></iframe> |
但是如果使用DOM方式来生成一个iframe时IE却始终隐藏不了边框,例如:
var iframe = document.createElement( 'iframe' ); |
iframe.setAttribute( 'frameborder' ,0); //Firefox下有效,IE下无效 |
我们需要直接对其属性进行赋值:
iframe.frameBorder=0; //Firefox和IE均有效 |
Internet Explorer 5.5 支持浮动框架的内容透明。如果想要为浮动框架定义透明内容,则必须满足下列条件:
- 与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true。(但设置了allowTransparency=true就遮不住select了!)
- 在 iframe 内容源文档,background-color 或 body 元素的 bgColor 标签属性必须设置为 transparent。
具体事例
1. 包含框架页的代码。
<body bgColor= "#eeeeee" > <iframe allowTransparency= "true" src= "transparent.htm" > </iframe> |
2.transparent.htm页的代码。
<body bgColor= "transparent" > |
对iframe进行操作:
var obj = document.getElementById(“iframe”); //获取对象 |
var dom = document.all.frames[“iframe”]; //获取DOM |
如果只想改变iframe的 src 或者 border ,scrolling 等attributes(与property不是一个概念,property是不能写在标签内的,比如:scrollHeight,innerHTML等),就需要用到第一种方法。
如果想取得iframe的页面(不是iframe本身)。就需要使用第二种方法,因为它取得的是一个完整的DOM模型,比如想得到iframe的document.body的内容,就只能用第二种方法
操作iframe中的DOM元素,需要注意以下两点:
- 必须先获取指定iframe的document
- 对于1,必须在页面load完以后才能获取;
控制Iframe中的页面的样式
<meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" /> |
<iframe id= "FF" src= "B.htm" ></iframe> |
<input type= "submit" value= " OK " onclick= "OK()" /> |
<script language= "JavaScript" > |
var iframe = document.getElementById( 'FF' ); |
var body = iframe.contentWindow.document.body; |
body.style.marginTop = 50; |
body.style.fontSize = 30; |
body.style.textAlign = 'center' ; |
body.style.backgroundColor = 'red' ; |
body.style.color = 'blue' ; |
去掉动态创建的iframe的边框
var iframe = document.createElement( 'iframe' ); |
iframe.scrolling= "no" ; //这两个属性的设置缺一不可。 |
window跟iframe标签是两回事 iframe的contentWindow属性是它里面的window
用getElementById才能取到iframe标签 ie直接用id得到的是里面的window
有关高度自适应问题
scrollHeight返回的是一个数字,没有带单位
在IE 下如果没有DTD声明,则按loose.dtd 解析,在设置对像的宽高时,会自动的加上单位"px"
将iframe的高度设为document.body的高度,也并不一定能成功,因为document.body的高度可能没有整个档的高度大,如使用了层
正确写法如下
var MainFrame = parent.document.getElementById( "main" ); |
MainFrame.style.height = document.documentElement.offsetHeight+ "px" ; //最好在这上面还加上一个常数,如10 |
通过iframe访问主页面
注:伪Ajax效果就是这样模拟的了
<script type= "text/javascript" > |
window.onload = function () { //这是主页面的代码 |
var frame = document.getElementById( "frame1" ); |
var msg = frame.contentDocument.getElementById( "message" ); |
msg.innerHTML = "Hello World from Frame Page 1" ; |
<pre class= "brush:javascript;gutter:false;toolbar:false" > |
<div class= "errordisplay" id= "message" > |
<script type= "text/javascript" > |
var msg = window.parent.document.getElementById( "message" ); |
msg.innerHTML = "Updated from iFrame" ; |
document.getElementById取到的iframe是不能直接操作里面的document的,只能这样取:
- 在IE为是frames[id].document或document.getElementById(id).contentWindow.document;
- 在firefox为frames[name].contentDocument或document.getElementById(id).contentDocument;
最后切记iframe在FF中是不绑定任何事件的!例子参见的另一篇博文
setAttribute的”bug”已经Fixed: 在ie8之前,用setAttribute方法为设定属性时,会有以下bug: "class", "for", "name", "style"这些属性都会不成功(亦或者说不能达到预期,比如setAttribute(“class”,”mystyleName”)会在 element上设置attribute,但是并没有达到我们改变className目的),在IE8中已经修复。
判断页面是否存在iframe
window.onload = function (){ |
var hasFrame = typeof window.frameElement === “undefined” |
原理是,没iframe的时候window.frameElement为null。
http://www.cnblogs.com/rubylouvre/archive/2009/08/01/1536710.html