JavaScript iframe的相互操作浅析

更新时间：2009年10月14日 14:56:46 作者：

下面对iframe的所有操作都是在同一个域下进行，暂不考虑跨域调用

iframe元素也就是文档中的文档，或者好像浮动的框架(frame)。关于iframe的操作一直是一个疑难点，网上有很多这方面的文章介绍。下面我结合自己的经验，整理一下笔记记录下来。
一、页面
三个页面：父页面和两个子页面，两个子页面在父页面的两个iframe里。
1、父页面MainForm.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainForm.aspx.cs" Inherits="Test.MainForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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()"就可以看到结果了.

您可能感兴趣的文章:

nodejs实用示例缩址还原
nodejs最近好红火，我也趁寒冷天气在nodejs的火炉边取暖一下。缩址还原实现代码。
2010-12-12
打字效果动画的4种实现方法(超简单)
下面小编就为大家带来一篇打字效果动画的4种实现方法(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
js实现固定显示区域内自动缩放图片的方法
这篇文章主要介绍了js实现固定显示区域内自动缩放图片的方法,实例分析了javascript操作页面元素及属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
Javascript 键盘事件的组合使用实现代码
Javascript 键盘事件的组合使用实现代码，需要的朋友可以参考下
2012-05-05
微信小程序定位当前城市的方法
这篇文章主要为大家详细介绍了微信小程序定位当前城市的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
如何理解JS函数防抖和函数节流
函数防抖和函数节流都是对函数进行特殊的设置，减少该函数在某一时间段内频繁触发带来的副作用。二者只是采用的设置方式和原理不一样，其最终的目的是一样的。
2021-05-05
微信小程序开发之toast等弹框提示使用教程
弹框提示是我们在开发中经常用的一个效果，下面这篇文章主要给大家介绍了微信小程序开发之toast等弹框提示实现的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06
javascript时间函数基础介绍
这篇文章主要介绍了javascript中提供了Date对象来进行时间和日期的计算，这里简单的介绍下，方便需要的朋友
2013-03-03
JavaScript中利用for循环遍历数组
这篇文章主要为大家详细介绍了JavaScript中利用for循环遍历数组，最好不要使用for in遍历，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
利用js实现Vue2.0中数据的双向绑定功能
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,下面这篇文章主要给大家介绍了关于如何利用js实现Vue2.0中数据的双向绑定功能的相关资料,需要的朋友可以参考下
2021-07-07