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标记。

 十、层

 

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.htminserted_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=''
 }
}


目录
相关文章
|
JavaScript 前端开发 Java
JavaScript FAQ (十九)——文件访问
十六、文件访问(File Access)   1、读取文件(Reading a File) Q:如何将文件读取到JavaScript变量中? A:根据脚本运行的环境和文件的位置,你可以有以下选项: XMLHttpRequest 对象(通过URL读取网站上可用的文件) FileSystemObject(如果你在一个被信任的环境下使用Windows Scripting Hosting或者IE) 一个读取文件或者URL的“助手”Java applet  关于前两个选项的讨论,请点击上面的超链接。
848 0
|
JavaScript 前端开发
JavaScript FAQ(十四)——鼠标事件(一)
十二、 鼠标事件   1. 鼠标事件属性(Mouse Event Properties ) Q:哪些事件属性我可以用来分析鼠标事件?A:Netscape Navigator 4和Internet Explorer 4(以及较新版本)支持相当少的事件属性。
775 0
|
JavaScript 前端开发 Windows
JavaScript FAQ(十五)——鼠标事件(二)
 十二、鼠标事件   2. 左键 vs.右键(Left vs. Right Button) Q:我如何检查用户点击的是右键还是左键? A:click事件只在左键发生,因此onClick事件处理器不用进行左右键测试。
802 0
|
JavaScript 前端开发 Windows
JavaScript FAQ(十六)——鼠标事件(三)
 十二、鼠标事件   5. Ctrl、Alt、Shift键(Ctrl, Alt, Shift Keys) Q:我如何检测和按下Ctrl、Alt和Shift键一起的鼠标事件? A:在当今的浏览器中,脚本可以检测鼠标事件发生时,用户是否按下了Ctrl、Alt或者Shift键中任何一个。
851 0
|
JavaScript 前端开发 机器学习/深度学习
JavaScript FAQ(十七)——颜色
十三、颜色    1. 背景色(Background Color) Q:如何修改页面背景色? A:可以通过设置document.bgcolor属性来改变背景色。例如,把背景色改为灰色: document.
895 0
|
JavaScript 前端开发 Windows
JavaScript FAQ(十八)—— CSS
 十五、层叠样式表(CSS)   1.  应用样式表(Applying Stylesheets) Q:我如何在页面上应用另外一个样式表? A:浏览器通过一个或者多个LINK命令(主要是在页面的HEAD区域)加载样式表(CSS文件),例如: JavaScript通过使用集合document.styleSheets访问样式表。
971 0
|
Web App开发 JavaScript 前端开发
JavaScript FAQ(一)—— 常见问题(一)
        今天在网上看到了一份很不错的JavaScript FAQ,由于担心自己并不能一直把它读完,所以就尝试翻译一些内容,和朋友们一起分享。        FAQ原地址:http://www.
1068 0
|
JavaScript 前端开发 Java
JavaScript FAQ(二)——常见问题(二)
一、常见问题   4. JavaScript的局限性(JavaScript Lminitations) Q:JavaScript程序不能做什么? A:JavaScript代码不能做下列事情: 不能使用用户系统上或者客户端局域网中的打印机或者其他设备。
1036 0
|
JavaScript 前端开发 C++
JavaScript FAQ (三)——常见问题(三)
 一、常见问题   9. JavaScript的注释(Comments in JavaScript) Q:我如何在JavaScript代码中插入注释? A:JavaScript支持三种不同类型的注释: 多行C样式的注释。
977 0
|
JavaScript 前端开发
JavaScript FAQ(四)——导航功能增强
 二、导航功能增强   1. 下拉菜单中的链接(Links in Select Menu) Q:我如何实现在下拉菜单中链接到不同的页面? A:要创建一个所示的下拉菜单:选择一个页面 JavaScript FAQ Numbers Strings Navigation Colors JavaScripter.net 你可以使用下面的代码: Select a page JavaScript FAQ Numbers Strings Navigation Colors JavaScripter.net 只需要把菜单项及其相应的URL改为你需要就可以了。
962 0