iframe元素也就是文档中的文档，或者好像浮动的框架(frame)。关于iframe的操作一直是一个疑难点，网上有很多这方面的文章介绍。下面我结合自己的经验，整理一下笔记记录下来。
一、页面
三个页面：父页面和两个子页面，两个子页面在父页面的两个iframe里。
1、父页面mainform.aspx
@ page language=c# autoeventwireup=true codebehind=mainform.aspx.cs inherits=test.mainform %>
html xmlns=http://www.w3.org/1999/xhtml>
head runat=server>
    title>title>
head>
body>
    form id=form1 runat=server>
    div>
        ul>
            li>
                父页面（文本失去焦点可看结果）：input id=txtparent name=txtparent type=text value=parent onblur=iframetest() />
            li>
            li>
                iframe src=framea.aspx id=iframea>iframe>
            li>
            li>
                iframe src=frameb.aspx id=iframeb>iframe>
            li>
        ul>
    div>
script type=text/javascript>
function iframetest() {
}
script>
form>
body>
html>
2、子页面a
@ page language=c# autoeventwireup=true codebehind=framea.aspx.cs inherits=test.framea %>
html xmlns=http://www.w3.org/1999/xhtml>
head runat=server>
    title>title>
script type=text/javascript>
//子页面与父页面之间的操作  
        function getparent() {
}
//当前子页面与另外一个子页面之间的操作
        function getanotherchild() {
}
    script>
head>
body>
    form id=form1 runat=server>
    div>
         子页面1（文本失去焦点可看结果）：input id=txtusername name=txtusername type=text value=jeff wong onblur=getparent() />
    div>
    form>
body>
html>

3、子页面b
@ page language=c# autoeventwireup=true codebehind=frameb.aspx.cs inherits=test.frameb %>
html xmlns=http://www.w3.org/1999/xhtml >
head runat=server>
    title>title>
head>
body>
    form id=form1 runat=server>
    div>
        子页面2（文本失去焦点可看结果）：input id=txtusernameb name=txtusernameb type=text  value=jeffery zhao/>
    div>
    form>
body>
html>
二、操作
1、父页面操作子页面
这个毫无疑问要在父页面mainform.aspx文件里实现。我们修改父页面的javascript函数iframetest，看父页面如何获取和操作子页面元素的：
        function iframetest() {
            var frame1 = document.getelementbyid(iframea);
            var frame2 = document.getelementbyid(iframeb);
var framea = document.frames[iframea]; //等价于 var frameaa = document.frames.iframea;
            var frameb = document.frames[iframeb]; //等价于 var framebb = document.frames.iframeb;
//**********************************************
            alert(frame1 == framea); //false
            alert(frame2 == frameb); //false
alert(frame1.src); //framea.aspx
            alert(frame1.location); //undefined
            alert(framea.src); //undefined
alert(framea.location); //location
            alert(framea.document.location);
alert(frame1.document.body.innerhtml); //这里返回的是mainform.aspx的body里的innerhtml
            alert(frame1.document.documentelement.innerhtml); //这里返回的是mainform.aspx的html里的innerhtml
alert(framea.document.body.innerhtml); //这里返回的是framea.aspx的body里的innerhtml
            alert(framea.document.documentelement.innerhtml); //这里返回的是framea.aspx的html里的innerhtml
//**********************************************  
            var childframedoc = undefined;
//取framea.aspx内的input文本
            if (document.all) {//ie
                childframedoc = framea.document; //*** 如果是frame1,就取不到framea.aspx页面里的input ***
            } else {//firefox
                childframedoc = framea.contentdocument;
            }
            alert(childframedoc.body.innerhtml);
var childtxt = childframedoc.getelementbyid(txtusername);
            var childtxtbyname = childframedoc.getelementsbyname(txtusername);
alert(childtxt == childtxtbyname[0]); //true
            alert(childtxt.value); //jeff wong
            alert(childtxtbyname[0].value); // jeff wong
//取frameb.aspx内的input文本
            childframedoc = undefined;
            if (document.all) {//ie
                childframedoc = frameb.document;
            } else {//firefox
                childframedoc = frameb.contentdocument;
            }
            alert(childframedoc.body.innerhtml);
var childtxt = childframedoc.getelementbyid(txtusernameb);
            var childtxtbyname = childframedoc.getelementsbyname(txtusernameb);
alert(childtxt == childtxtbyname[0]); //true
            alert(childtxt.value); //jeffery zhao
            alert(childtxtbyname[0].value); // jeffery zhao
}
小结：
a、通过iframe对象所在页面的对象模型（通过document.getelementbyid(iframeid)获取），你可以访问iframe对象的属性，但不能访问其内容。
b、frames集合提供了对iframe内容的访问（通过document.frames[iframename]获取）。通常情况下我们都使用frames集合读写iframe内包含的元素。
c、 如果只想改变iframe的src或者border, scrolling等attributes(与property不是一个概念,property是不能写在标签内的,比 如:scrollheight,innerhtml等),就需要用到document.getelementbyid方法.
d、要想使用iframe内的函数或dom元素（比如想得到iframe的document.body的内容）,变量就必须通过frames集合.因为它取的是一个完整的dom模型，而通过id获取的方法只是取出了一个object而已.
e、如果在iframe的页面未完全装载的时候,调用iframe的dom模型,会发生错误.
2、子页面操作父页面
这里以子页面framea.aspx举例。在子页面a中，我们通过函数getparent获取mainform.aspx的dom元素，然后按照正常的dom元素操作就是了：
//子页面与父页面之间的操作  
        function getparent() {
            if (self != top) {
                var odoc = top.parent.document;
                alert(odoc.body.innerhtml);
                alert(odoc.documentelement.innerhtml);
                alert(odoc.frames.length); //返回结果：2  表明父页面有两个iframe
//操作父页面的文本框
                var otxt = odoc.getelementbyid(txtparent);
                alert(otxt.value);
}
            else alert(不在框架中);
        }
3、子页面操作子页面
这个还要借助主页面间接获取另一个子页面。这里还以子页面a来举例。通过主页面，我们间接获取了子页面b，然后像正常操作dom一样，子页面a完成对子页面b的控制和操作。
先修改getanotherchild()函数：
//当前子页面与另外一个子页面之间的操作
        function getanotherchild() {
            alert(self.location.href); //当前页面的url
//通过父页面，间接获取另外一个子页面
            if (self != top) {
                var odoc = top.parent.document;
                var oanotherframe = odoc.frames[iframeb]; //返回另外一个iframe
alert(oanotherframe.location);
                alert(oanotherframe.document.body.innerhtml);
                alert(oanotherframe.document.documentelement.innerhtml);
var otxt = oanotherframe.document.getelementbyid(txtusernameb);
                alert(otxt.value); //jeffery zhao
            }
        }

注意：修改完getanotherchild()函数，然后将子页面a（framea.aspx）中的textusername的onblur事件改为 onblur=getanotherchild()就可以看到结果了.