JavaScript程序设计基础教程实训指导-6-2 实训案例名称：窗口框架操作.docx
实训案例名称：窗口框架操作
1．任务介绍
使用JavaScript来进行在iframe父子窗口之间相互操作dom对象。
2．任务目标
熟练掌握窗口框架的相关操作。
3．实现思路
（1）创建一个父页面，两个子页面。在父页面中通过contentWindow属性操作子窗口页面元素。
document.getElementById(iframeid).contentWindow.document.getElementById(test)
（2）在子页面使用parent.getIFrameDOM()调用父页面的函数实现对平级的子页面进行操作，并且在子页面中通过使用parent.document操作父页面元素。
4．实现代码
完整代码如脚本index、脚本iframeA、脚本iframB所示。
脚本index.html
!Doctypehtml
htmllang=en
head
metacharset=UTF-8
titleiframe父子窗口之间相互操作dom对象/title
/head
body
divclass=opt_btn
buttononclick=getValiframeA();父窗口获取iframeA中的值/button
buttononclick=setValiframeA();父窗口设置iframeA中的值/button
buttononclick=setBgiframeA();父窗口设置iframeA的h1标签背景色/button
/div
divid=result--操作结果--/div
divclass=frames
iframeid=wIframeAname=myiframeAsrc=iframeA.htmlscrolling=noframeborder=1style=height:190px/iframe
iframeid=wIframeBname=myiframeBsrc=iframeB.htmlscrolling=noframeborder=1style=height:190px/iframe
/div
/body
scripttype=text/javascript
functiongetIFrameDOM(iID){
returndocument.getElementById(iID).contentWindow.document;
}
functiongetValiframeA(){
varvalA=getIFrameDOM(wIframeA).getElementById(iframeA_ipt).value;
document.getElementById(result).innerHTML=获取了子窗口iframeA中输入框里的值：spanstyle=color:#f30+valA+/span;
}
functionsetValiframeA(){
getIFrameDOM(wIframeA).getElementById(iframeA_ipt).value=Helloweba;
document.getElementById(result).innerHTML=设置了子窗口iframeA中输入框里的值：spanstyle=color:#f30Helloweba/span;
}
functionsetBgiframeA(){
getIFrameDOM(wIframeA).getElementById(title).style.background=#ffc;
}
/script
/html
脚本iframeA.html
!DOCTYPEhtml
html
head
metacharset=utf-8
title/title
/head
body
h1id=titleiframeA/h1
inputtype=textid=iframeA_iptname=iframeA_iptvalue=123
pid=hello欢迎您！/p/br
/b