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()：

<script language="JavaScript">
<!--
function insertExternalFile(fname,W,H) {
 if (navigator.appName.indexOf("Microsoft")!=-1
  || navigator.appName=="Netscape" 
     && parseInt(navigator.appVersion)>4
 ) 
 {
  document.write(''
  +'<IFRAME src="'+fname+'" scrolling="no" frameborder=0 border=0'
  +(W==null ? '' : ' width='+W)
  +(H==null ? '' : ' height='+H)
  +'></IFRAME>'
  )
 }
 if (navigator.appName=="Netscape" 
     && parseInt(navigator.appVersion)==4) {
  document.write(''
  +'<ILAYER>'
  +'<LAYER src="'+fname+'" '
  +(W==null ? '' : ' width='+W)
  +(H==null ? '' : ' height='+H)
  +'></LAYER></ILAYER>'
  )
 }
}
//-->
</script>

2. 创建层（Creating Layers）

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

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

上面的例子使用了代码：

<form>
<input type=button value="Create layer"
onClick="makeLayer('LYR1',200,10,100,100,'red',1,1)">
<input type=button value="Delete layer"
onClick="deleteLayer('LYR1')">
</form>

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

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

这个函数的JavaScript源码是：

function makeLayer(id,L,T,W,H,bgColor,visible,zIndex) {
 if (document.layers) {
  if (document.layers[id]) {
   alert ('Layer with this ID already exists!')
   return
  }
  var LR=document.layers[id]=new Layer(W)
  LR.name= id
  LR.left= L
  LR.top = T
  LR.clip.height=H
  LR.visibility=(null==visible || 1==visible ? 'show' : 'hide')
  if(null!=zIndex)  LR.zIndex=zIndex
  if(null!=bgColor) LR.bgColor=bgColor
 }
 else if (document.all) {
  if (document.all[id]) {
   alert ('Layer with this ID already exists!')
   return
  }
  var LR= '/n<DIV id='+id+' style="position:absolute'
  +'; left:'+L
  +'; top:'+T
  +'; width:'+W
  +'; height:'+H
  +'; clip:rect(0,'+W+','+H+',0)'
  +'; visibility:'+(null==visible || 1==visible ? 'visible':'hidden')
  +(null==zIndex  ? '' : '; z-index:'+zIndex)
  +(null==bgColor ? '' : '; background-color:'+bgColor)
  +'"></DIV>'
  document.body.insertAdjacentHTML("BeforeEnd",LR)
 }
}

3. 删除层（Deleting Layers）

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

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

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

<form>
<input type=button value="Create layer"
onClick="makeLayer('LYR1',200,10,100,100,'red',1,1)">
<input type=button value="Delete layer"
onClick="deleteLayer('LYR1')">
</form>

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

function deleteLayer(id) {
 if (document.layers && document.layers[id]) {
  document.layers[id].visibility='hide'
  delete document.layers[id]
 }
 if (document.all && document.all[id]) {
  document.all[id].innerHTML=''
  document.all[id].outerHTML=''
 }
}