ITPub博客

首页 > Linux操作系统 > Linux操作系统 > [转载]使 Web 应用程序能够适应多种浏览器

[转载]使 Web 应用程序能够适应多种浏览器

原创 Linux操作系统 作者:dinner1007 时间:2019-07-14 08:24:05 0 删除 编辑
使 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 中的原点

请记住,当页面在 Internet Explorer 中从右到左显示时,必须修改算法,比如按照原点的偏移量调整元素的位置。

获得多行的树视图列表

使用

  • 标记显示树视图列表。但是基于 Mozilla 的浏览器不允许在
  • 标记中嵌入其他元素,所以只能使用简单的列表项。为了解决这个问题,可以使用表格创建树视图列表。通过使用 TABLE 而不是 LI 来实现列表项,可以建立复杂的列表项。

    但是,当 TABLE 有多列时,就会再次遇到问题。在用鼠标重设窗口大小时,会产生怪异的效果。图 2 是重设窗口大小之前的页面。


    图 2. 在重设窗口大小之前,列对齐到网格上
    在重设窗口大小之前,列对齐到网格上

    图 3 显示重设框架大小之后的页面;列不再对齐到网格上。


    图 3. 重设窗口大小之后;列不再对齐到网格上
    重设窗口大小之后;列不再对齐到网格上

    可以给树视图的表格中的 TD 设置宽度,但是这种方法不好,因为 TD 的宽度只意味着它的最大尺寸,所以在您重设窗口大小时,浏览器可能会重设 TD 的大小来显示更多内容。为了实现有组织的外观,需要其他东西 —— DIV。(在本文中,DIVTABLETD 代表 DOM 树中的节点;当然,也可以将它们当作 HTML 标记对待。)

    不幸的是,您很快就会意识到 DIV 会造成相似的问题。DIV 的宽度不是绝对的,而是最小宽度。如果改变窗口的大小,一些浏览器也会改变 DIV 的宽度。那么,如果将 TDDIV 组合起来怎么样呢?如果将 DIV 嵌套在 TD 中,那么单元格的最大和最小尺寸都定义了。现在就有了一个固定的大小,如 图 4 所示。


    图 4. 在 DIV 的帮助下,页面看起来效果很好
    在 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 页面的显示不正确。为了处理这个问题,可以使用


    清单 4. 告诉用户他们为什么无法看到正确显示的页面
    				
    
    	
    	
    	
    
    

    但是,对于这个问题更好的解决方案是,为 Web 应用程序提供另一个不依赖于 JavaScript 的版本。这样的话,无论用户是否启用了 JavaScript 支持,他们都能够使用您的应用程序。使用 清单 5 所示的代码将用户定向到非脚本版本。


    清单 5. 将应用程序定向到非脚本版本
    				
    
    




    回页首


    结束语

    在本文中,我提供了一些提示,比如如何在基于 Mozilla 的浏览器中实现 innerText 属性,如何使用变量表示几何值使它们对所有浏览器可用,以及当页面在 Internet Explorer 中从右到左显示时如何按照原点的偏移量调整元素的位置。还演示了如何获得多行的树视图列表,如何为 DIV 元素设置合适的大小,如何支持那些不支持 JavaScript 的浏览器。我希望这些提示会在日常工作中对您有所帮助。

    来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/374079/viewspace-130232/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2018-08-23

  • 博文量
    1714
  • 访问量
    1295009