巧用Behaviors檢測瀏覽器

我們知道，網頁瀏覽器到目前為此還沒有一個統一的標準，從而造成了在一種瀏覽器中很漂亮的頁面，而在那一種瀏覽器中卻面目全非的現象，為了減少這種現象出現，我們往往要根據主流的幾種瀏覽器來設計同一內容不同格式的網頁。目前在國內IE有絕對的占有率，在這種情況下我們設計的網頁只要兼容它就行了，但NetScape在國外還是有很多人使用，畢竟她是瀏覽器的元老。Dreamweaver3為我們設計和調試不同瀏覽器的網頁提供了許多方便，關于這一點我另有專用介紹。那么當我們設計了適合不同瀏覽器的網頁，又如何自動地檢測訪客的瀏覽器從而顯示不同的網頁呢？這個問題看起來比較復雜。但用Behaviors的Check Browser動作可以很輕松地解決。在用此方法之前，你必須準備三個同一內容的頁面，一個適合IE瀏覽器的（設為IEpage.htm）；一個適合NetScape瀏覽器的（設為NSpage.htm)；另一個適合其它瀏覽器的（設為Otherpage.htm）。下面我們講具體方法：
　　1、考慮到國內大部分是IE瀏覽器，所以我們把Check Browser動作放在適合IE瀏覽器的網頁上。那么我們就在Dreamweaver3中打開該網頁（IEpage.htm）。由于我們希望能在載入網頁時能自動檢測瀏覽器并自動打開相應的頁面，自然想到用“onLoad”來作觸發事件，但Behaviors使用“onLoad”這個觸發事件是有條件的，這我放到本文的后面講，先用老一套辦法來解決。選取幾個文字做一個空鏈接，再按F8調出Behaviors面板，在面板上點擊“+”圖標，然后在拉出的菜單中選擇Check Browser動作，彈出的Check Browser對話框如下圖所示：

　　圖1 Check Browser動作對話框

　　初看這個編輯窗口那么多參數，還有好多選項，不要緊張，搞清楚這個動作的原理就不必害怕了，這個動作是由一組復雜的條件語句完成的，根據判斷的結果做出選擇，在三個網頁當中選其一。這個動作可以明確判斷兩種瀏覽器：Netscape 和IE，不是這兩種瀏覽器一概做Other Browser 處理。判斷每一種瀏覽器都會有三種選項，Go to URL（打開一指定文件），Go to Alt URL（打開另一指定頁面），Stay on this page（停留在該頁面）。URL和Alt URL是定義Go to URL 和Go to Alt URL所指向頁面的。
　　2、那么具體應該如何填這些參數呢？我們在選擇參數之前首先要明確我們的目的，我們希望的結果是：若是IE瀏覽器則就是當前頁面；若是NetScape瀏覽器則打開NSpage.htm；若都不是則打開Otherpage.htm。那么應該這樣填：在Internet Explorer4.0 or Later右面的輸入框中點擊那個三角形圖標，選擇“Stay on this Page”；在Netscape Navigator4.0 or Later右面的輸入框中點擊那個三角形圖標，選擇“Go to URL”；在Other Browsers右面的輸入框中點擊那個三角形圖標，選擇“Go to URL”；在URL中填入NSpage.htm；在Alt URL中填入Otherpage.htm。按OK返回Behaviors面板。當然，你也可以根據你的需要采用其它的填參數方法，另外，在URL和Alt URL的網頁文件名也可以點擊其右邊的文件瀏覽器去查找，找到后直接選取就行，不一定要手動輸入。但有一點要注意：你的Check Browser行為應該加到Stay on this page 的頁面中，否則就起不了作用。
　　3、打開源代碼檢視窗，我們看到空鏈接中的代碼是這樣的：
< a href="#" onClick="MM_checkBrowser(4.0,0,2,4.0,1,2,2,'bhjq1.htm','bhjq2.htm');return document.MM_returnValue" >
　　我們把中間那段調用動作的代碼剪切后移到標記中，并把“onClick”改為“onLoad”，且把那個空鏈接刪除。這樣當載入該網頁時就會自動檢測用戶的瀏覽器并根據不同的瀏覽器自動打開不同格式的網頁了，是不是妙極了！這么復雜的問題想不到就這么簡單就解決了。
　　若是你是剛開始制作這個網頁或能找到頁面的空白處，就可以不用做空鏈接，而直接點一下空白處，然后按F8調出Behaviors面板來設置Check Browses動作，此后的操作與上面相同，這樣在Behaviors的面板就有“onLoad”觸發事件了。這里要特別注意的是頁面的空白處而不是層或表格等的空白處，否則將沒有“onLoad”觸發事件事件供你選擇。由于我們一般排好版后的網頁找空白處比較困難，所以我著重介紹了上面的變通辦法。