在不同的浏览器或具有不同设置的浏览器上,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 中从右到左显示时,必须修改算法,比如按照原点的偏移量调整元素的位置。
获得多行的树视图列表
使用 <ul> 和 <li> 标记显示树视图列表。但是基于 Mozilla 的浏览器不允许在 <li> 标记中嵌入其他元素,所以只能使用简单的列表项。为了解决这个问题,可以使用表格创建树视图列表。通过使用 TABLE 而不是 LI 来实现列表项,可以建立复杂的列表项。
但是,当 TABLE 有多列时,就会再次遇到问题。在用鼠标重设窗口大小时,会产生怪异的效果。图 2 是重设窗口大小之前的页面。
图 2. 在重设窗口大小之前,列对齐到网格上
图 3 显示重设框架大小之后的页面;列不再对齐到网格上。
图 3. 重设窗口大小之后;列不再对齐到网格上
可以给树视图的表格中的 TD 设置宽度,但是这种方法不好,因为 TD 的宽度只意味着它的最大尺寸,所以在您重设窗口大小时,浏览器可能会重设 TD 的大小来显示更多内容。为了实现有组织的外观,需要其他东西 —— DIV。(在本文中,DIV、TABLE 和 TD 代表 DOM 树中的节点;当然,也可以将它们当作 HTML 标记对待。)
不幸的是,您很快就会意识到 DIV 会造成相似的问题。DIV 的宽度不是绝对的,而是最小宽度。如果改变窗口的大小,一些浏览器也会改变 DIV 的宽度。那么,如果将 TD 和 DIV 组合起来怎么样呢?如果将 DIV 嵌套在 TD 中,那么单元格的最大和最小尺寸都定义了。现在就有了一个固定的大小,如 图 4 所示。
图 4. 在 DIV 的帮助下,页面看起来效果很好
回页首
处理多种语言
当应用程序支持多种语言时,要记住相同的文本在不同的语言中可能有不同的长度,这可能会使页面看起来很糟糕。调整包含文本的 DIV 可以帮助解决这个问题。
为 DIV 定义合适的大小
假设您希望使用 DIV 建立一个弹出菜单。但是,如果没有给菜单设置固定的大小,在滚动页面时就会遇到一个问题,如 图 5 所示。
图 5. 滚动页面会导致文本溢出
可以看到,文本溢出了。如果 DIV 没有设置固定的大小,Internet Explorer 就会自动地把 DIV 设置为可见部分的大小。所以,当滚动页面以查看不可见部分时,DIV 不够大,导致文本溢出。为了解决这个问题,必须给 DIV 设置固定的大小。
现在,需要了解如何处理这个大小。不能对这个大小进行硬编码,因为如果支持多种语言,DIV 中文本的长度是不固定的。需要动态地获取文本的长度,然后设置 DIV 的大小。表格在这种情况下会有所帮助。表格的大小与它的可见性无关。清单 3 演示如何给 DIV 设置合适的宽度。
清单 3. 按照其中文本的长度设置 DIV 的宽度
var leftmenu = document.getElementById("leftmenu");
var divWidth = parseInt(document.getElementById("divtable").offsetWidth);
leftmenu.style.width = divWidth +"px";
回页首
处理不同的浏览器设置
不但是不同的浏览器和语言会导致问题,有时候用户也会导致问题。当用户在他们的浏览器中进行特殊的设置时,常常会导致问题。例如,禁用 JavaScript 功能就会给应用程序造成难题。
支持那些不支持 JavaScript 的浏览器
一些用户仍然使用老的浏览器版本,还有一些用户在浏览器中禁用了 JavaScript,这会导致 Web 页面的显示不正确。为了处理这个问题,可以使用 <noscript> 标记。只需在这个标记中添加一些文本,告诉用户他们的浏览器不支持 JavaScript,因此不能正确地查看页面。清单 4 演示了所用的代码。
清单 4. 告诉用户他们为什么无法看到正确显示的页面
<html>
<head>
<noscript>
Your browser does not support JavaScript,
or you've disabled the JavaScript in your browser,
so you cannot view this page correctly.
</noscript>
</head>
</html>
但是,对于这个问题更好的解决方案是,为 Web 应用程序提供另一个不依赖于 JavaScript 的版本。这样的话,无论用户是否启用了 JavaScript 支持,他们都能够使用您的应用程序。使用 清单 5 所示的代码将用户定向到非脚本版本。
清单 5. 将应用程序定向到非脚本版本
<noscript>
<meta http-equiv="REFRESH" CONTENT="0;URL=noscriptversion.jsp?">
</noscript>
回页首
结束语
在本文中,我提供了一些提示,比如如何在基于 Mozilla 的浏览器中实现 innerText 属性,如何使用变量表示几何值使它们对所有浏览器可用,以及当页面在 Internet Explorer 中从右到左显示时如何按照原点的偏移量调整元素的位置。还演示了如何获得多行的树视图列表,如何为 DIV 元素设置合适的大小,如何支持那些不支持 JavaScript 的浏览器。我希望这些提示会在日常工作中对您有所帮助。
http://www.ibm.com/developerworks/cn/web/wa-adaptapps/index.html