使 Web 应用程序能够适应多种浏览器

在不同的浏览器或具有不同设置的浏览器上，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 中从右到左显示时，必须修改算法，比如按照原点的偏移量调整元素的位置。