js 中 iframe 的操作

iframe 是一个非常有用的标签，先不说早期用它来模型 Ajax 效果，现在富本文编辑器

它也绝对是主角。但是它又是一个特别的元素，最早出现

IE4.0 中，后纷纷被其他游览器吸

纳，由于

IE 不开源，iframe 在各游览器中都有很大差异。本文针对 IE9、FF、Chrome 三大浏

览器进行分析。

1.获得 iframe 对象
  我们常用的获得 iframe 的方式一般有两种
  var obj = document.getElementById(“iframe”);//获取对象 
  var dom = window.frames[“iframe”];//获取 DOM
  
如果只想改变

iframe 的 src 或者 border ，scrolling 等 attributes，就需要用到第一种方法。

但是如果想取得

iframe 所包含的页面(不是 iframe 本身)。就需要使用第二种方法，因为

它取得的是一个完整的

DOM 模型，比如想得到 iframe 的 document.body 的内容

操作

iframe 中的 DOM 元素，需要注意以下两点：

（

1）必须先获取指定 iframe 的 document

（

2）对于 1，必须在页面 load 完以后才能获取；

但是请注意：

chrome 浏览器只能使用在 HTTP 协议中，在本地 js 文件不支持 Iframe 包

含页面的访问。

  改变 iframe 本身的属性
  document.getElementById(“iframe”).src="a.html";
  document.getElementById(“iframe”).frameborder="200";
 
2.在父窗体中访问子窗体对象
var value=window.frames[“frm”].document.getElementById("txt").value;
window.frames[“frm”]是获得子窗口的 window 对象
 
3.在子窗口访问父窗口对象
var value=window.parent.document.getElementById("txt").value;
其中：

window.parent 是获得父窗口的 window 对象。

4.iframe 高度自适应
scrollHeight 返回的是一个数字，没有带单位
在

IE 下如果没有 DTD 声明，则按 loose.dtd 解析，在设置对像的宽高时，会自动的加

上单位

"px"

将

iframe 的高度设为 document.body 的高度，也并不一定能成功,因为 document.body 的

高度可能没有整个档的高度大，如使用了层

正确写法如下
.在子页面中进行设置 frame 的高度
var frm=window.parent.document.getElementById("frm");//获得父窗口
frm.style.height=document.body.scrollHeight + "px";//设置父窗口的高度
 
5.contentWindow 和 contentDocument
我们开始使用

window.frames["name"]获得 frame 中的页面 window 对象

使用

document.getElementById(id)只能获得 frame 对象