中华网--科技频道--网络教室

程序的兼容

你可以用 JavaScript 去得到和改变 CSS－P 元素中的性质. 但由于不同的浏览器的元素和元素的性质名字有所不同, 我们应该知道如何处理这种讨厌的情况。在这里, 我们将要探讨如何让你的程序在两种主要的浏览器 NS4 和 IE4 中都工作.

浏览器检测:

首先, 我们应该知道如何来知道用户用的是哪种浏览器. 下面这段程序虽然比较简单但足以区别 NS4 和 IE4.

  ns4 = (document.layers)? true:false
  ie4 = (document.all)? true:false

document.layers 是 Netscape 4 专有的，而 document.all 却是 IE 4 专有的. 所以检查这些专有 object 存在与否可以帮助我们设立变量 ns4 (为 Netscape 4.0) 和 ie4 (为 Internet Explorer 4.0). 如果 document.layers 存在, 就让 ns4 等于 ture. 如果document.all 存在，就让 ie4 等于 true. 这样，以后你如果需要知道用户用的是那个浏览器，检查这两个变量就可以了

  function check() {
    if (ns4) {
      // do something in Netscape Navigator 4.0
    }
    if (ie4) {
      // do something in Internet Explorer 4.0
    }
  }

使用 JavaScript 和 CSS-P:

假如我们有一个如下的 DIV tag：

<DIV ID="blockDiv" STYLE="position:absolute; left:200; top:100">
<IMG SRC="../photo/jie07.jpg" WIDTH=30 HEIGHT=30 BORDER=0>
</DIV>

DIV 的名字是随你起的. 但当你给了它名字以后, JavaScript 就要参照这个名字来控制它. 下面告诉你 JavaScript 如何参照这个名字的.

对 Netscape 来说，得到 CSS-P 性质 (property) 的方法如下:

  document.blockDiv.propertyName

或者是

  document.layers["blockDiv"].propertyName

而对于 Internet Explore 来说，要用

  blockDiv.style.propertyName

或者是

  document.all["blockDiv"].style.propertyName

propertyName 可以是任何一个 DIV 可以用的 CSS－P 的性质, 比如 left, top, visibility, zIndex, width。

浏览器通用方法 (指针变量):

一个比较好的使得你的程序通用于 Netscape 和 IE 的方法是设立一个变量. 如果浏览器是 NS, 这个变量指向 document.blockDiv. 如果浏览器是 IE. 它就指向 blockDiv.style 我们称它为指针变量。请看下面的语句.

  if (ns4) block = document.blockDiv
  if (ie4) block = blockDiv.style

你可以注意到, 有了这个指针变量, 我们以后可以用简便的方法得到或改变 CSS-P 的性质. 因为无论你用的是那种浏览器, 对于这个 DIV, 我们都用 block 来表示. 比如你想看看一个名字为 "blockDiv" 的 Div tag 的横向左边坐标是多少, 可以

  block.left

一个实例

这个例子将能出示一个预警窗口告诉你一个 CSS－P 元素的 left, top 和 visiibilty 性质。这个程序在IE和NS都能工作。这套教程的目的就是让你能了解如何写出通用的动态网页

  <HTML>
  <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    ns4 = (document.layers)? true:false
    ie4 = (document.all)? true:false

    function init() {
      if (ns4) block = document.blockDiv
      if (ie4) block = blockDiv.style
    }
    //-->
    </SCRIPT>
  </HEAD>

  <BODY onLoad="init()">

  <A HREF="javascript:alert(block.left)">left</A> -
  <A HREF="javascript:alert(block.top)">top</A> -
  <A HREF="javascript:alert(block.visibility)">visibility</A>

  <DIV ID="blockDiv" 
	STYLE="position:absolute; left:50; top:100; 
		width:30; visibility:visible;">
  <IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0>
  </DIV>

  </BODY>

点这看这个实例如何工作

注意: init() 子程序是在 BODY onLoad="..." 叫的。这样它只能在网页所有的内容全部下传以后才被执行. 要不然会因为在有 blockDiv 之前而用它而造成网页错误.

　　《DHTML Builder》 Jie/文

﹣相关报道

进入BBS

进入聊天室

关闭窗口

本站检索

网络教室编辑信箱