JavaScript程序设计基础教程实训指导-6-2 实训案例名称：窗口框架操作

实训案例名称窗口框架操作.任务介绍1使用来进行在父子窗口之间相互操作对象JavaScript iframe dom.任务目标2熟练掌握窗口框架的相关操作实现思路

3.创建一个父页面，两个子页面在父页面中通过属性操作子窗口页面元素1contentwindowdocument.getElementByldiframeid.contentWindow.document.getElementByldtest,在子页面使用调用父页面的函数实现对平级的子页面进行操作，并且在子页面中2parent.getIFrameDOM通过使用操作父页面元素parent.document实现代码

4.完整代码如脚本、脚本脚本所示index iframeAiframB%脚本index.html!Doctype htmlhtmllang=enheadmeta charset=,UTF-8,父子窗口之间相互操作对象vtitleiframe domv/tiQe/headbodydiv class=opt_btn「父窗口获取中的值〈/button onclick=getValiframeA iframeA button父窗口设置中的值〈/button onclick=setValiframeA;”iframeAbutton,父窗口设置的标签背景色〈/〉button onclick=setBgiframeA;”iframeA hibutton/div操作结果div id:result”“-v/divdiv class=uframes,iframe id=,wlframeAn name=^myiframeA,^src=,iframeA.html scrolling-no frameborder二1style-height:190px/iframeiframe id=wlframeB name=myiframeBn src=iframeB.html”scrolling=no frameborder=1style-height:190px/iframe/div/bodyscript type=ntext/javascripffunction getlFrameDOMilD{return document.getElementByldilD.contentWindow.document;function getValiframeA{var valA=getlFrameDOMwlframeA,.getElementByldiframeA_ipt.value;”获取了子窗口中输入框里的值:document.getElementByldresult.innerHTML=iframeA spanstyle=color:#f30+valA+v/span；function setValiframeA{getlFrameDOM^wlframeA^.getElementByldCiframeAJpt.value=Helloweba1;设置了子窗口中输入框里的值:document.getElementByldresult.innerHTML=iframeA spanstyle=color:#f30Helloweba/span;function setBgiframeA{getlFrameDOMCwlframeA^.getElementByldCtitleJ.style.background=/script/html脚本iframeA.html!DOCTYPE htmlhtmlheadmeta charset=utf-8titlehelloweba.com/title/headbodyh1id=titleHiframe A/h1二input type=“text“id=iframeA_ipt”name iframeA_ipt value=123”p id=hellohelloweba.com^ffi^!/p/br/body/html脚本iframeB.htmlhtml headmetacharset=utf8titlehelloweba.com/title/headbodyh1iframe B/h1p id=,helloHelloweb.com/pinput type=textH id=niframeB_ipt name=iframeBJpt value-1,2,3,4子窗口操作父窗口button onclick-child4parent;iframeB/button操作子窗口〈/button onclick=child4child;”iframeB iframeAbuttonv/br/bodyscript type=,text/javascript,function child4child{「var paentDOM=parent.getlFrameDOMwlframeA;parentDOM.getElementByldhello.innerHTML=,span style=,color:blue;font-size:18px;background:yellow9看到输入框里的值变化了吗？/spanH;parentDOM.getElementByldiframeAJpt.value=document.getElementByldfiframeBJpf.value;parent.document.getElementByldresult.innerHTML二子窗口iframeB操作了子窗口iframeA”；function child4parent{var iframeBJpt=document.getElementByldfiframeBJprj.value;parent.document.getElementByldHresult.innerHTML-pstyle=background:#000;color:#fff;font-size:15px;S口传来输入框值span style=color:#f30+iframeB_ipt+Zspan/p;/script/html父页面中操作里的使用属性，属性是指指index.html JavaScriptiframedomcontentwindow contentwindow定的或者所在的对象，在中或者的属性可以省略，但在frame iframewindow IEiframe framecontentwindow Firefox中如果要对iframe对象进行编辑，必须指定contentwindow属性，contentwindow属性支持所有主流浏览器Index.html父页面中自定义了函数传入参数即可获取之后就跟在当前页面获取元素的操作一样getIFrameDOM,ilD iframe,了子页面通过使用调用了父页面的自定义函数,从而就可iframeB.html parent.getlFrameDOM getIFrameDOM以对平级的子页面进行操作，子页面还可以通过使用操作父页面元素iframeA.html parent.document运行结果

5.父窗口获取iframeA中的值父窗口设置而ameA中的值父窗口设置iframeA的M标签背景色运行父页面脚本显示如图所示index.html

6.19iframe Biframe A-港作结果一iframeA欢迎您!iframeB欢迎您!iframeB子窗口操作父窗口iframeB稳作子窗口iframeA图

6.19任务6・2示例结果1单击“父窗口获取中的值”按钮显示结果如图所示iframeA

6.20父窗口获取iframeA中的值亚窗口设置iframeA中的值岑窗口设置iframeA的hi标签背景色获取了子窗口iframeA中输入框里的值i frame瞰迎您!iframe Aiframe BiframeA欢迎您!iframeB欢迎您!iframeB子窗口操作父窗口iframeB操作子窗口iframeA图

6.20任务6・2示例结果2单击“父窗口设置中的值”按钮显示结果如图所示iframeA

6.21室窗口获助而ameA中的值仝窗口设置iframeA中的值父窗口设司frameA的hi标筌背景色iframe BiframeAiframeB欢迎您！父窗口欢迎您！设置了子窗口iframeA中输入框里的值.「迎您！iframeB子窗口操作或窗口iframeB操作子窗口iframeA图任务示例结果

6.216-23单击“父窗口设置中的标签背景色”按钮显示结果如图所示iframeA hl

6.22父窗口获取iframeA中的值父窗口设置iframeA中的值父窗口设贵iframeA的hi标签背景色-崛作结果一iframeAiframeiframeB欢迎您！iframeA欢迎您!iframeB子窗口操作父窗口iframeB操作子窗口iframeA图任务示例结果

6.226-24单击子窗口操作父窗口”按钮显示结果如图所示“iframeB

6.23父窗口获取iframeA中的值父窗口设贵iframeA中的值父窗口设置iframeA的hi标签背景色iframe BiframeA子窗口传来愉入框值iframeB欢迎您iframeA欢迎您!iframeB欢迎您!iframeB子窗口操作父窗口iframeB操作子窗口iframeA图任务示例结果

6.236-25单击操作子窗口按钮显示结果如图所示“iframeB iframeA”

6.24父窗口获取iframeA中的值父窗口设贵iframeA中的值父窗口设式iframeA的hi标签背景色iframe BiframeA子窗口i fraroeB操作了子窗口ifraroeAiframeB欢迎您!iframeB欢迎您!iframeB子窗口操作父窗口iframeB操作子窗口iframeA图

6.24任务6・2示例结果6。