JavaScript程序设计基础教程实训指导-6-3 实训案例名称：iframe创建动态内容.docx
实训案例名称：iframe创建动态内容
1．案例描述
编写程序使用JavaScript为iframe创建动态内容，当用户单击页面链接时，显示当前session中用户访问页面的次数。
2．实现思路
（1）首先创建一个HTML主页面。页面包含一个子窗口iframe。在主页面区域单击链接动态改变ifarme子窗口内容。
（2）定义函数initLinks循环遍历页面上所有的链接。然后对每个链接设置两个元素：onclick处理函数和thisPage属性。后者存有单机链接后会显示的页码，例如链接0就是“page1”，链接1就是“page2”，以此类推。循环中的onclick处理函数让每个链接在单击后调用writeContent()函数。代码片段如下：
functioninitLinks(){
for(vari=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值存入进去。代码片段如下：
varpageCount=newArray(0,0,0,0);
functionwriteContent(){
pageCount[this.thisPage]++;
varnewText=h1YouarenowlookingatExample+this.thisPage;
newText+=.brYouhavebeentothispage;
newText+=pageCount[this.thisPage]+times.\/h1;
document.getElementById(icontent).contentWindow.document.body.innerHTML=newText;
returnfalse;
}
3．实现代码
完整代码如脚本6-18所示。
脚本6-18.html
!DOCTYPEhtml
html
head
title创建动态的iframe/title
scriptsrc=script.js/script
linkrel=stylesheethref=script.css
/head
body
iframesrc=iframe01.htmlname=icontentid=icontent/iframe
h1MainContentArea/h1
h2
ahref=#Link1/abr
ahref=#Link2/abr
ahref=#Link3/abr
/h2
/body
/html
script.js
varpageCount=newArray(0,0,0,0);
window.onload=initLinks;
functioninitLinks(){
for(vari=0;idocument.links.length;i++){
document.links[i].onclick=writeContent;
document.links[i].thisPage=i+1;
}
}
functionwriteContent(){
pageCount[this.thisPage]++;
varnewText=h1YouarenowlookingatExample+this.thisPage;
newText+=.brYouhavebeentothispage;
newText+=pageCount[this.thisPage]+times.\/h1;
document.getEle