JavaScript操作iframe的实例详解

发布时间:2019-10-31编辑:脚本学堂
本文介绍下,在javascript中操作iframe的一些方法与实例,感兴趣的朋友可以参考下。

本节内容:
javascript操作iframe,仅限于同一个域下。

iframe元素也就是文档中的文档,或好像浮动的框架(frame)。

一、页面
三个页面:父页面和两个子页面,两个子页面在父页面的两个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>JavaScript iframe操作 - www.jb200.com</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>JavaScript iframe</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>JavaScript iframe</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模型,会发生错误。

有兴趣的朋友,还可以阅读下iframe高度自适应的文章,以加深iframe方面的理解。

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