javascript父、子页面交互小结_JAVA_编程开发_程序员俱乐部

    <span style="font-family: Times New Roman; font-size: 16px;">帧用来存放子页面，既可以是iframe,又可以是frameset。window对象是全局对象，页面上的一切函数和对象都在它的作用域里。</span>

<span style="font-family: Times New Roman; font-size: 16px;">1、parent代表父窗口，如果父窗口又存在若干层嵌套，则top代表顶级父窗口。 self代表窗口自身。</span>

<span style="font-family: Times New Roman; font-size: 16px;"> Java代码 <br>
if(self==top){//}判断窗口是否处于顶级 <br>
if(self==parent){}//也可以 </span>

<span style="font-family: Times New Roman; font-size: 16px;">2、父子页面交互</span>

<span style="font-family: Times New Roman; font-size: 16px;"> 1）父页面访问子页面元素。思路是子页面的元素都在其window.document对象里面，先获取它然后就好说了。</span>

<span style="font-family: Times New Roman; font-size: 16px;"> 帧最好设置name属性，这样操作最方便。如<br>
Java代码</span>

<span style="font-family: Times New Roman; font-size: 16px;"> <iframe name="test" src="child.html"></iframe></span>

<span style="font-family: Times New Roman; font-size: 16px;"> 假如要获取child.html里面id为'menu'的元素，则可以这样写：</span>[size=16px;]<br><span style="font-family: Times New Roman;"> Java代码 <br>
window.frames["test"].document.getElementById('menu'); <br>
//由于所有的函数都存放在window对象里面，可去掉开头的window： <br>
frames["test"].document.getElementById('menu');<br>
浏览器中，帧的name属性被默认等同于子页面的window对象，因此可以进一步简写： <br>
test.document.getElementById('menu'); [/size]</span>

<span style="font-family: Times New Roman; font-size: 16px;"> 2）父页面访问子页面函数或对象。子页面的函数和对象都在其window对象里，同上，关键是获取该对象。</span>

<span style="font-family: Times New Roman; font-size: 16px;"> Java代码 <br>
//假如child.html定义了showMesg函数，需要在父中调用，则这样写 <br>
window.frames['test'].showMesg(); <br>
//简写形式 <br>
test.showMesg(); <br>
//同理，对象也是如此访问 <br>
alert(test.person); </span>

<span style="font-family: Times New Roman; font-size: 16px;"> 3）其他获取document的方式。</span>

<span style="font-family: Times New Roman; font-size: 16px;"> 先使用'document.getElementById()'或'document.getElementsByTagName()'把帧作为 document下的Element获取，然后访问其属性contentDocument/contentWindow (iframe、frame特有),其中第一个ie7-不支持，第二个chrome不支持.<br>
Java代码 <br>
<iframe id="testId" src="child.html"></iframe> <br>
//====== <br>
var doc=document.getElementById('testId'); <br>
//或者 <br>
var doc=document.getElementsByTagName('iframe')[0]; <br>
然后 <br>
var winOrdoc=doc.contentDocument||doc.contentWindow;//二选一<br>
if(winOrdoc.document)winOrdoc=winOrdoc.document; <br>
winOrdoc.getElementById('menu'); </span>

<span style="font-family: Times New Roman; font-size: 16px;"> 4）子页面访问父页面元素。思路同1），先获取父窗口window.document对象.
</span>

<span style="font-family: Times New Roman; font-size: 16px;"> Java代码 <br>
parent.window.document.getElementById('parentMenu'); <br>
//简写<br>
parent.document.getElementById('parentMenu'); </span>

<span style="font-family: Times New Roman; font-size: 16px;"> 5）子页面访问父页面函数或对象。思路同2.2，先获取父窗口window对象。
</span>

<span style="font-family: Times New Roman; font-size: 16px;"> Java代码 <br>
parent.parentFunction(); </span>