|
|
一、頁(yè)面
三個(gè)頁(yè)面：父頁(yè)面和兩個(gè)子頁(yè)面，兩個(gè)子頁(yè)面在父頁(yè)面的兩個(gè)iframe里。
1、父頁(yè)面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>
父頁(yè)面（文本失去焦點(diǎn)可看結(jié)果）：<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、子頁(yè)面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">
//子頁(yè)面與父頁(yè)面之間的操作
function getParent() {
}
//當(dāng)前子頁(yè)面與另外一個(gè)子頁(yè)面之間的操作
function getAnotherChild() {
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
子頁(yè)面1（文本失去焦點(diǎn)可看結(jié)果）：<input id="txtUserName" name="txtUserName" type="text" value="jeff wong" onblur="getParent()" />
</div>
</form>
</body>
</html>
3、子頁(yè)面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>
子頁(yè)面2（文本失去焦點(diǎn)可看結(jié)果）：<input id="txtUserNameB" name="txtUserNameB" type="text" value="jeffery zhao"/>
</div>
</form>
</body>
</html>
二、操作
1、父頁(yè)面操作子頁(yè)面
這個(gè)毫無疑問要在父頁(yè)面MainForm.ASPx文件里實(shí)現(xiàn)。我們修改父頁(yè)面的Javascript函數(shù)iframeTest，看父頁(yè)面如何獲取和操作子頁(yè)面元素的：
function iframeTest() {
var frame1 = document.getElementById("iframeA");
var frame2 = document.getElementById("iframeB");
var frameA = document.frames["iframeA"]; //等價(jià)于 var frameAa = document.frames.iframeA;
var frameB = document.frames["iframeB"]; //等價(jià)于 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內(nèi)的input文本
if (document.all) {//IE
childFrameDoc = frameA.document; //*** 如果是frame1,就取不到FrameA.ASPx頁(yè)面里的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內(nèi)的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
} 小結(jié)：
a、通過iframe對(duì)象所在頁(yè)面的對(duì)象模型（通過document.getElementById("iframeId")獲取），你可以訪問iframe對(duì)象的屬性，但不能訪問其內(nèi)容。
b、frames集合提供了對(duì)iframe內(nèi)容的訪問（通過document.frames["iframeName"]獲取）。通常情況下我們都使用frames集合讀寫iframe內(nèi)包含的元素。
c、 如果只想改變iframe的src或者border, scrolling等attributes(與property不是一個(gè)概念,property是不能寫在標(biāo)簽內(nèi)的,比 如:scrollHeight,innerHTML等),就需要用到document.getElementById方法.
d、要想使用iframe內(nèi)的函數(shù)或dom元素（比如想得到iframe的document.body的內(nèi)容）,變量就必須通過frames集合.因?yàn)樗〉氖且粋€(gè)完整的DOM模型，而通過id獲取的方法只是取出了一個(gè)object而已.
e、如果在iframe的頁(yè)面未完全裝載的時(shí)候,調(diào)用iframe的dom模型,會(huì)發(fā)生錯(cuò)誤.
2、子頁(yè)面操作父頁(yè)面
這里以子頁(yè)面FrameA.ASPx舉例。在子頁(yè)面A中，我們通過函數(shù)getParent獲取MainForm.ASPx的dom元素，然后按照正常的dom元素操作就是了：
//子頁(yè)面與父頁(yè)面之間的操作
function getParent() {
if (self != top) {
var oDoc = top.parent.document;
alert(oDoc.body.innerHTML);
alert(oDoc.documentElement.innerHTML);
alert(oDoc.frames.length); //返回結(jié)果：2 表明父頁(yè)面有兩個(gè)iframe
//操作父頁(yè)面的文本框
var oTxt = oDoc.getElementById("txtParent");
alert(oTxt.value);
}
else alert("不在框架中");
}
3、子頁(yè)面操作子頁(yè)面
這個(gè)還要借助主頁(yè)面間接獲取另一個(gè)子頁(yè)面。這里還以子頁(yè)面A來舉例。通過主頁(yè)面，我們間接獲取了子頁(yè)面B，然后像正常操作dom一樣，子頁(yè)面A完成對(duì)子頁(yè)面B的控制和操作。
先修改getAnotherChild()函數(shù)：
//當(dāng)前子頁(yè)面與另外一個(gè)子頁(yè)面之間的操作
function getAnotherChild() {
alert(self.location.href); //當(dāng)前頁(yè)面的url
//通過父頁(yè)面，間接獲取另外一個(gè)子頁(yè)面
if (self != top) {
var oDoc = top.parent.document;
var oAnotherFrame = oDoc.frames["iframeB"]; //返回另外一個(gè)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()函數(shù)，然后將子頁(yè)面A（FrameA.ASPx）中的textUserName的onblur事件改為 onblur="getAnotherChild()"就可以看到結(jié)果了.
JavaScript技術(shù)：JavaScript iframe的相互操作淺析，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
