JavaScript FAQ（十二）

最新推荐文章于 2025-08-10 11:06:14 发布

最新推荐文章于 2025-08-10 11:06:14 发布 · 70 阅读

文章标签：

#JavaScript #浏览器 #Microsoft #HTML #ViewUI

本文介绍如何使用HTML与JavaScript实现外部文件嵌入层显示、创建及删除层等实用技巧，适用于不同浏览器环境。

十、层

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

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

2. 创建层（Creating Layers）

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

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

上面的例子使用了代码：

  <form> 
 <inputtype=buttonvalue="Createlayer" 
 onClick="makeLayer('LYR1',200,10,100,100,'red',1,1)"> 
 <inputtype=buttonvalue="Deletelayer" 
 onClick="deleteLayer('LYR1')"> 
 </form> 
 

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

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

这个函数的JavaScript源码是：

  functionmakeLayer(id,L,T,W,H,bgColor,visible,zIndex){ 
 if(document.layers){ 
 if(document.layers[id]){ 
 alert('LayerwiththisIDalreadyexists!') 
 return 
}
 varLR=document.layers[id]=newLayer(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 
}
 elseif(document.all){ 
 if(document.all[id]){ 
 alert('LayerwiththisIDalreadyexists!') 
 return 
}
 varLR='\n<DIVid='+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> 
 <inputtype=buttonvalue="Createlayer" 
 onClick="makeLayer('LYR1',200,10,100,100,'red',1,1)"> 
 <inputtype=buttonvalue="Deletelayer" 
 onClick="deleteLayer('LYR1')"> 
 </form> 
 

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

  functiondeleteLayer(id){ 
 if(document.layers&&document.layers[id]){ 
 document.layers[id].visibility='hide' 
 deletedocument.layers[id] 
}
 if(document.all&&document.all[id]){ 
 document.all[id].innerHTML='' 
 document.all[id].outerHTML='' 
}
}
 