回前頁

Netscape 中 HTML 標籤擬 LAYER 化

Netscape 的最重要的改寫元件 LAYER
相較於 Internet Explorer 4.0 版後的 HTML 標籤全面物件化，支援動態 CSS 物件，以及動態改寫元件 innerHTML,outerHTML 屬性，幾乎所有的 HTML 標籤，都可以 當做改寫元件。Netscape 在動態改寫元件上的支援上，卻顯的十分薄弱，傳統 HTML 標籤除了 FORM 附屬輸入元件的 value ，及 IMG 標籤的 SRC 屬性外，真正能稱作一個 功能完整的動態改寫元件，只有 4.0 版以後推出的 LAYER 元件組，所以要執行 Netscape 的動態改寫，就不能遺漏對 LAYER 元件組的探討。
LAYER 是一組功能
或許你對作者不稱 LAYER 標籤，而稱 LAYER 元件組有些懷疑，你或許也會解釋 說因為 Netscape 中還有個 ILAYER 標籤，也具有部份改寫能力，所以和 LAYER 合稱 LAYER 元件組。當然，這麼說不能稱為錯，但卻對 Netscape 賦予 LAYER 的功能認識 不夠全面。Netscape 不只把動態改寫的能力跼限於 LAYER 和 ILAYER 兩個標籤上， 其實它是把所有需要支援動態改寫的 HTML 標籤，轉化到一個 layers 集合中，借由 此種一般標籤的 LAYER 化，賦予該標籤動態改寫能力。
HTML 標籤如何 LAYER 化
在 Netscape 中，除了 LAYER 和 ILAYER 具有 LAYER 元件改寫能力外，一般傳統 HTML 中的 Block-Level 標籤，也可經由設定 CSS position 屬性，使其取得準 LAYER 或稱作擬 LAYER 的能力，進而成為 Netscape document.layers 集合物件中 的成員。如<DIV STYLE="position:absolute;"> 將使得這個 DIV 區段被當做準 LAYER 來處理，而 <SPAN STYLE="position:relative;"> 則會使 SAPN 標籤被 當做準ILAYER 來判斷。我們可以做個實驗，我們先在 HTML 中這麼寫： 
<DIV ID="div1">
    我是 HTML DIV 區段
</DIV>
然後用這樣的 JavaScript 對 document.layers 物件內容加以偵測： 
    var obj,str="";
    for (obj in document.layers)
    {str+=obj+" : "+document.layers[obj]+"\n";}
執行結果請按 這裏。 當你按下 [layers 物件偵測] 鈕時，資訊顯示為 "length:0" ，表示 layers 中沒有 任何 layer 物件。接著我們為 DIV 標籤加入 CSS position 屬性： 
<DIV ID="div1" STYLE="position:absolute;">
    我是 position=absolute 的 DIV 區段
</DIV>
並且增加了 H2,P,SPAN 三個標籤，有的 position 為 relative ，有的維持 static 的 預設狀態，執行結果請按 這裏。 由範例可知，凡是 position 為 relative or absolute 的，都加入了 document.layers 集合物件中，position 為 static 或沒有設的，則仍維持原貌。
Layer 和 擬 Layer 物件的使用區別
基本上當 HTML Block-Level 標籤透過 CSS 的 position 屬性在 Netscape 中取得 準 Layer 元件地位時，它同時也具有了 Layer 元件的動態改變能力，但其中有些 動態改變及事件偵測能力則是標準 Layer 元件專有的，準 Layer 元件並不具有此種 能力。以下是我們就 Netscape 4.5 中文版測試的結果：
  1. 計量單位的區別：
      CSS 為了更好的支援網頁元件的編排定位，它的大小長寬的度量單位可以 有相對單位(em)、絕對單位(pt,mm,px)和百分比(120%)三種方式，這對 協助設計網路上不同螢幕及字型硬體組態適用的網頁有很大的幫助。但 LAYER 和 ILAYER 標籤只支援 px 一種絕對度量單位及百分比度量單位， 這在 ILAYER 等 relative 的元件上困擾還小，但對 LAYER 等 absolute 元件卻會造成不同使用環境觀視結果會差異很大的困境。
  2. 插入外部檔案的區別：
      標準 LAYER 和 ILAYER 標籤需要插入外部的 HTML 檔案是靠 SRC 屬性來 指定，但擬 layer 和 ilayer 元件則必須使用 CSS 的 include-source 屬性來設定，如 STYLE="include-source:url('外部檔案 URL');"。當然 include-source 不是 W3C 制定的標準 CSS 規格，而是 Netscape 4 自己 的規格。
  3. 動態改變插入檔案的區別：
      這或許不是 layer 和 準 layer 元件的差別，而是 Netscape 內部 layer 元件和 ilayer 元件的差別，那就是 layer 元件可以在 Script 敘述中藉 document.layerName.src="新插入檔案 URL"; 來改變插入檔案 ，但 ilayer 元件執行同樣的語法，結果卻是空白一片。而準 layer 元件 則繼承了這種限制， positionz:absolute 的，繼承 layer 能力，可以 正常改變， positionz:relative 的，則繼承了 ilayer ，而無法正常 顯示。
  4. 動態改寫檔案物件的區別：
      layer 物件各個動態屬性中，有個附屬子物件叫 document，這個 document 就如 window 下的 document 子物件一樣，具備了做為其他 網頁標籤容器及動態能力。其中有個關涉動態改寫非常重要的功能就是 document.write() 方法，其測試結果亦如前一個說明，layer 和準 layer 元件的 document.write() 正常，但 ilayer 和準 ilayer 元件 無法正常顯示。
  5. 事件偵測能力的區別：
      layer 元件依 Netscape 網站說法，可以對下列五種事件有反應，不過 也特別指明，這些事件偵測只支援 layer 元件，其他 ilayer 及準 layer 和準 ilayer 元件都不支援，因此特別在此列出，提醒你注意。
    1. OnMouseOver
    2. OnMouseOut
    3. OnFocus
    4. OnBlur
    5. OnLoad
回前頁
1