[转]javascript对iframe的互操作浅析
单日志页面显示设置
关闭
网易首页网易博客
博客首页博客拍拍精美风格博客圈子博客活动娱乐中心找 朋 友博客复制手机博客短信写博意见反馈更多 >> 搜 索登录 | 注册
tangjiajia121的博客
枫叶丹的技术支持中心 首页 日志 相册 音乐 收藏 博友 关于我
很抱歉，因为您在网易相册发布了违规信息，账号被屏蔽。被屏蔽期间他人无法访问您的相册。
去帮助中心，了解如何重新恢复服务。
日志
javascript realplayer
window media player 参数
javascript对iframe的互操作浅析
javascript 2009 - 10 - 16 18 : 17 阅读66 评论0 字号： 大大 中中 小小 下面对iframe的所有操作都是在同一个域下进行，暂不考虑跨域调用]
iframe元素也就是文档中的文档，或者好像浮动的框架(frame)。关于iframe的操作一直是一个疑难点，网上有很多这方面的文章介绍。下面我结合自己的经验，整理一下笔记记录下来。
一、页面
三个页面：父页面和两个子页面，两个子页面在父页面的两个iframe里。
1 、父页面MainForm.aspx
Code
<% @ 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
Code
<% @ 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
Code
<% @ 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，看父页面如何获取和操作子页面元素的：
Code
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元素操作就是了：
Code
// 子页面与父页面之间的操作
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()函数：
Code
// 当前子页面与另外一个子页面之间的操作
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() " 就可以看到结果了.