使 Web 應用程式能夠適應多種瀏覽器

在不同的瀏覽器或具有不同設定的瀏覽器上，Web 頁面的執行方式不一樣。本文學習一些有用的技巧，協助您讓自己的 Web 應用程式更適應所有的環境。

不同 網頁瀏覽器的特性，比如語言設定和 JavaScript 支援，會導致 Web 應用程式在不同瀏覽器中的工作方式不一致。瀏覽器之間的不一致性不但會導致應用程式看起來很糟糕，而且常常使它無法工作。本文將給出一些技巧，您可以使用這些技巧解決這類問題。

處理不同種類的瀏覽器

Web 頁面無法在任何地方都順利工作的主要原因是，不同種類的瀏覽器支援不同的標準。克服這個問題的最佳方法是只使用通用的屬性和方法。但是，有時候必須編寫特殊的代碼。

實現 innerText 屬性

使用 innerText 屬性設定或擷取在一個對象的開始標記和結束標記之間的文本，這個屬性只在 Microsoft Windows Internet Explorer 中定義了。儘管這個屬性得到了廣泛的使用，但它不是標準屬性。可以使用 innerHTML 替代它，但是它們並不相同。innerText 屬性提供了特殊特性，比如能夠直接獲得子節點的文本，這可以協助我們編寫更乾淨的代碼。您也可能遇到使用 innerText 屬性的遺留頁面。通過自己實現 innerText 屬性，可以讓這些頁面支援更多的瀏覽器。例如，可能需要在基於 Mozilla 的瀏覽器中實現這個屬性；清單 1 展示了實現方法。

清單 1. 為基於 Mozilla 的瀏覽器實現 innerText

HTMLElement.prototype.__defineGetter__ ( "innerText",function() //define a getter method to get the value of innerText, //so you can read it now! { var textRange = this.ownerDocument.createRange(); //Using range to retrieve the content of the object textRange.selectNodeContents(this); //only get the content of the object node return textRange.toString(); // give innerText the value of the node content } );

獲得滾動值和視窗大小

大多數 Web 應用程式需要幾何值，比如視窗大小和滾動值。但是，瀏覽器可以在不同的屬性中儲存這些值；一些屬性甚至是名稱相同而含義不同。更好的方法是建立自己的獨特的變數來表示這些屬性值。清單 2 示範了如何在多數主流瀏覽器中建立獨特的屬性。

清單 2. 將一些通用變數定義為獨特的屬性，可以用來儲存幾何值

var scrollLeft,scrollTop; // scrollLeft: The distance between the horizontal scrollbar // with the left edge of the frame. // scrollTop: The distance between the vertical scrollbar // with the top edge of the frame. // Get the scroll value from different browsers. // Determine the browser type first. // And then get the value from the particular property. if (window.pageYOffset){ scrollTop = window.pageYOffset } else if(document.documentElement && document.documentElement.scrollTop){ scrollTop = document.documentElement.scrollTop; } else if(document.body){ scrollTop = document.body.scrollTop; } if(window.pageXOffset){ scrollLeft=window.pageXOffset } else if(document.documentElement && document.documentElement.scrollLeft){ scrollLeft=document.documentElement.scrollLeft; } else if(document.body){ scrollLeft=document.body.scrollLeft; } var windowWidth,windowHeight; // frame width & height if(window.innerWidth){ windowWidth=window.innerWidth; } else if(document.documentElement && document.documentElement.clientWidth){ windowWidth=document.documentElement.clientWidth; } else if(document.body){ windowWidth=document.body.offsetWidth; } if(window.innerHeight){ windowHeight=window.innerHeight; } else if(document.documentElement && document.documentElement.clientHeight){ windowHeight=document.documentElement.clientHeight; } else if(document.body){ windowHeight=document.body.clientHeight; }

雙向語言中的視窗原點

一些語言（比如 Arabic 和 Hebrew）被稱為雙向語言，這意味著它們是由右至左閱讀的。當前的瀏覽器支援從右至左顯示內容。但是，當頁面從右至左顯示時，Internet Explorer 定義了不同的視窗原點。這個原點並不在畫布的左上方，而是在可見部分的左上方。這意味著頁面的某些部分會有負的 x 值，這會使頁面的某些元素出現在錯誤的位置上。圖 1 顯示當頁面從右至左顯示時 Internet Explorer 中原點的位置。

圖 1. 當頁面從右至左顯示時 Internet Explorer 中的原點

請記住，當頁面在 Internet Explorer 中從右至左顯示時，必須修改演算法，比如按照原點的位移量調整元素的位置。