JavaScript程序设计基础教程实训指导-6-3 实训案例名称：iframe创建动态内容

实训案例名称iframe创建动态内容

1.案例描述编写程序使用JavaScript为iframe创建动态内容，当用户单击页面链接时，显示当前session中用户访问页面的次数

2.实现思路1首先创建一个HTML主页面页面包含一个子窗口iframe在主页面区域单击链接动态改变ifarme子窗口内容2定义函数initLinks循环遍历页面上所有的链接然后对每个链接设置两个元素onclick处理函数和thisPage属性后者存有单机链接后会显示的页码，例如链接0就是“page1，链接1就是“page2，以此类推循环中的onclick处理函数让每个链接在单击后调用writeContenK函数代码片段如下function initLinks{forvar i=0;idocument.links.length;i++{document.links[i].onclick=writeContent;document.links[i].thisPage=i+1;3定义数组pageCount用来记录加载页面的次数，每单击一次页面，设置pageCount[this.thisPage]++,这样就可以跟踪到访问特定页面的次数4函数writeContent设置变量newText用来存储iframe的动态内容，利用contentwindow属性找到iframe的元素，将newText值存入进去代码片段如下var pageCount=new Array0,0,0,0;function writeContent{pageCount[this.thisPage]++;var newText=h1You arenow lookingat ExampleK+this.thisPage;newText+=H.brYou havebeen tothis pagenewText+=pageCount[this.thisPage]+times.Vh1;document.getElementByldCicontenrj.contentWindow.document.body.innerHTML=newText;return false;完整代码如脚本6-18所示脚本6-

18.html!DOCTYPE htmlhtmlhead〈title〉创建动态Wiframe/titlescript src=script.js/scriptlink rel=ustylesheetn href=script.css,/headbodyiframe src=,,iframeO

1.html name-icontent id=Hicontent/iframeh1Main ContentArea/h1h2a href=#nLink1/abra href=,#nLink2/abra href=,#nLink3/abr/h2/body/htmlscript.jsvar pageCount=new Array0,0,0,0;window.onload=initLinks;function initLinks{forvar i=0;idocument.links.length;i++{document.links[i].onclick=writeContent;document.links[i].thisPage=i+1;function writeContent{pageCount[this.thisPage]++;var newText=h1You arenow lookingat Example+this.thisPage;newText+=.brYou havebeen tothis pagenewText+=pageCount[this.thisPage]+times.Vh1;documentgetElementByldicontentn.contentWindow.document.body.innerHTML=newText;return false;script.cssbody{background-color:#FFF;iframe#icontent{float:right;border:1px solidblack;width:350px;height:300px;margin-top:100px;}!DOCTYPE htmliframeO

1.htmlhtmlhead〈title,创建动态的iframe〈/title/headbodyPlease loada page/body/html运行结果如图

6.26所示Main ContentAreaLink1You arenow lookingLink2at Example

1.Link3You havebeen toC

①localhost/W$6-

18.htmlthis page5times.图

6.26创建动态的iframe示例结果。