JavaScript iframe的相互操作浅析
更新时间：2009年10月14日 14:56:46 作者：
下面对iframe的所有操作都是在同一个域下进行，暂不考虑跨域调用
iframe元素也就是文档中的文档，或者好像浮动的框架(frame)。关于iframe的操作一直是一个疑难点，网上有很多这方面的文章介绍。下面我结合自己的经验，整理一下笔记记录下来。
一、页面
三个页面：父页面和两个子页面，两个子页面在父页面的两个iframe里。
1、父页面MainForm.aspx
一、页面
三个页面：父页面和两个子页面，两个子页面在父页面的两个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()"就可以看到结果了.
相关文章
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
分别针对ie和火狐分别作了对xml文档和xml字符串的解析,考虑到了浏览器的兼容性,至于在ajax环境下解析xml，其实原理是一样的，只不过放在了ajax里，还是要对返回的xml进行解析,感兴趣的朋友可以了解下，或许对你学习js解析xml有所帮助2013-02-02
这篇文章给大家介绍了Javascript快速实现浏览器系统通知的方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-08-08
鼠标捕获(setCapture)作用是将鼠标事件捕获到当前文档的指定的对象。这个对象会为当前应用程序或整个系统接收所有鼠标事件。2010-03-03
这篇文章主要介绍了js+html5实现可在手机上玩的拼图游戏,涉及javascript结合html5进行图形操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了javascript实现table表格隔行变色的方法,涉及javascript针对表格元素与样式的操作技巧,需要的朋友可以参考下2015-05-05
CSV文件一般是以逗号为分隔值的文件(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本),下面这篇文章主要给大家介绍了JS小知识之如何将CSV转换为JSON字符串的相关资料,需要的朋友可以参考下2023-06-06
class类是一种抽象的体现,用来表示具有相同特性的一类事物,是面向对象编程不可缺少的工具,下面这篇文章主要介绍了javascript语言中类class的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
我们在用javascript创建一个遮盖层(div)后，如果点击关闭用到了2009-06-06
这篇文章主要介绍了原生JavaScript+LESS实现瀑布流的方法，附上了具体实例，这里推荐给有需要的小伙伴。2014-12-12
这篇文章主要介绍了webpack多页面开发实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论