JavaScript FAQ（十二）

十、层

1. 层内放置外部文件（External Files Within Layers）

Q：我可以在将外部的HTML文件作为页面的一部分显示吗？

A：可以，你可以通过使用下面方法实现：

• LAYER或者ILAYER标记，SRC=FILENAME.HTM（在Netscape4中）
• IFRAME标记，SRC=FILENAME.HTM（在Explore4+ 和 Netscape 6中）

你可以使用JavaScript检测浏览器的名称和版本（见客户端信息），然后生成需要的IFRAME或者LAYER标记。

这是一个例子：

在上面的例子中，我们创建了一个JavaScript函数insertExternalFile()，用来检测客户端浏览器和生成必要的标记。为了插入外部文件，我们调用insertExternalFile()时，将文件名作为一个参数。这个函数还有另外两个参数：用来显示插入文件区域的宽和高。因此，外部文件inserted_file1.htm和inserted_file2.htm就通过下面的代码被嵌入到页面中：

insertExternalFile("inserted_file.htm",layer_width,layer_height)

下面的JavaScript代码是包含在页面HEAD区域的insertExternalFile()：

1. <scriptlanguage="JavaScript">
2. <!--
3. functioninsertExternalFile(fname,W,H){
4. if(navigator.appName.indexOf("Microsoft")!=-1
5. ||navigator.appName=="Netscape"
6. &&parseInt(navigator.appVersion)>4
7. )
8. {
9. document.write(''
10. +'<IFRAMEsrc="'+fname+'"scrolling="no"frameborder=0border=0'
11. +(W==null?'':'width='+W)
12. +(H==null?'':'height='+H)
13. +'></IFRAME>'
14. )
15. }
17. if(navigator.appName=="Netscape"
18. &&parseInt(navigator.appVersion)==4){
19. document.write(''
20. +'<ILAYER>'
21. +'<LAYERsrc="'+fname+'"'
22. +(W==null?'':'width='+W)
23. +(H==null?'':'height='+H)
24. +'></LAYER></ILAYER>'
25. )
26. }
27. }
28. //-->
29. </script>

2. 创建层（Creating Layers）

Q：我如何通过JavaScript创建一个新层？

A：正常情况下，你可以通过在页面的HTML代码中使用DIV创建层。不过，你也可以通过JavaScript创建。下面是一个例子：

上面的例子使用了代码：

1. <form>
2. <inputtype=buttonvalue="Createlayer"
3. onClick="makeLayer('LYR1',200,10,100,100,'red',1,1)">
4. <inputtype=buttonvalue="Deletelayer"
5. onClick="deleteLayer('LYR1')">
6. </form>

这段代码调用makeLayer来创建一个新层：

makeLayer(ID,left,top,width,height,color,visible,zIndex)

这个函数的JavaScript源码是：

1. functionmakeLayer(id,L,T,W,H,bgColor,visible,zIndex){
2. if(document.layers){
3. if(document.layers[id]){
4. alert('LayerwiththisIDalreadyexists!')
5. return
6. }
7. varLR=document.layers[id]=newLayer(W)
8. LR.name=id
9. LR.left=L
10. LR.top=T
11. LR.clip.height=H
12. LR.visibility=(null==visible||1==visible?'show':'hide')
13. if(null!=zIndex)LR.zIndex=zIndex
14. if(null!=bgColor)LR.bgColor=bgColor
15. }
16. elseif(document.all){
17. if(document.all[id]){
18. alert('LayerwiththisIDalreadyexists!')
19. return
20. }
21. varLR='\n<DIVid='+id+'style="position:absolute'
22. +';left:'+L
23. +';top:'+T
24. +';width:'+W
25. +';height:'+H
26. +';clip:rect(0,'+W+','+H+',0)'
27. +';visibility:'+(null==visible||1==visible?'visible':'hidden')
28. +(null==zIndex?'':';z-index:'+zIndex)
29. +(null==bgColor?'':';background-color:'+bgColor)
30. +'"></DIV>'
31. document.body.insertAdjacentHTML("BeforeEnd",LR)
32. }
33. }

3. 删除层（Deleting Layers）

Q：我可以通过JavaScript删除一个层吗？

A：这个例子在创建层部分已经看到过了：

这个例子由下面的代码创建：

1. <form>
2. <inputtype=buttonvalue="Createlayer"
3. onClick="makeLayer('LYR1',200,10,100,100,'red',1,1)">
4. <inputtype=buttonvalue="Deletelayer"
5. onClick="deleteLayer('LYR1')">
6. </form>

要删除一个层，就将层的ID作为参数调用deleteLayer(id)函数。下面是这个函数的源码：

1. functiondeleteLayer(id){
2. if(document.layers&&document.layers[id]){
3. document.layers[id].visibility='hide'
4. deletedocument.layers[id]
5. }
6. if(document.all&&document.all[id]){
7. document.all[id].innerHTML=''
8. document.all[id].outerHTML=''
9. }
10. }