系统前端实现多浏览器兼容

浏览器概述

浏览器是指可以显示网页服务器或者文件系统的HTML文件内容,并让用户与这些文件交互的一种软件

主要工作发送用户请求,接收服务器端响应,将返回的HTML页面展现给用户。

随着web2.0的推进,以及作为核心支持技术的Ajax的普及,对JavaScript的处理也成为决定WEB页面特效及用户操作体验的重要因素,这主要取决于浏览器的内核中JavaScript引擎的表现。另外,随着用户的浏览内容的多样化,页面的渲染速度成为了评价浏览器好坏的重要因素,这是由浏览器内核中的排版引擎(Rendering Engine)决定的。

JavaScript引擎

系统前端实现多浏览器兼容

 不同JavaScript引擎性能对比

系统前端实现多浏览器兼容

排版引擎
系统前端实现多浏览器兼容

说明:系统对IE(IE6,IE8)、FireFox(4.0以上)、Safari、Google等四款主流浏览器兼容。


 不兼容情况统计

测试方法:

采用基线回归案例(209个)

测试结果:

执行完回归案例,发现不兼容点47处

结果分析:

这里的47处并不能完全说明问题,大部分都是阻碍性缺陷,当这些缺陷修复后又涌现大量不兼容问题。以31.0版本修复23处问题,整个版本冒烟跟系统测试上报的将近70个BUG。

不兼容主要原因

•1、网页采用DIV+CSS布局方法,这种布局有很多优点,如符合W3C标准;使内容和样式的分离,让页面和样式的调整更加方便等等。这也是网页发展的一种趋势,但是目前由于不同浏览器对CSS的解释不统一,因此会造成IE浏览器下能正常显示的页面变换到其它浏览器后,显示效果不一样。
•2、网页中使用了JavaScript中的一些函数,而某些函数在不同的浏览器中解释不一样,这就造成在IE浏览器中显示正确的信息在其它浏览器中变成错误信息
具体问题逐一分析
1、浏览器时间显示问题

       var eYear = parseInt(sDate.getYear(),10);

  在IE浏览器中,通过以上方法变量eYear的值可以变为2012,而在FF、Safari、Chrome浏览器下,sDate.getYear()返回的是Date对象中年份与1900年之间的差距,即112。解决此问题可以更换使用getFullYear()函数,即:var eYear = parseInt(sDate.getFullYear(),10);

2、元素赋值

在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在其他浏览器中不能

  如 <select name="week" title="">

  上面的这种写法在IE下执行下面语句是可以正常获取到值。

  var week = document.getElementById('week').options

  但是在FF等其它浏览器中不能正常获取

  解决方法:

  <select name="week" id="week"  title="">

3、Iframe元素使用

parent.parent.frames('header');

  top.frames('header‘);

  现有代码中许多集合类对象取用时使用 (),IE 能接受,FF等其它浏览器则不能。

  解决方案:

  parent.parent.frames['header‘];

  top.frames['header‘];

var _headerWin = top.frames['header'];

  var _leftObj = _headerWin.urlData['personallife']['LEFTMENU'];

  这种写法在Google、Safari浏览器下会提示找不到urlData该对象,需要通过iframe下的contentWindow对象来访问

  解决方案:

  var _leftObj = _headerWin.contentWindow ?(

  _headerWin.contentWindow.urlData['personallife']['LEFTMENU']

  ):(

  _headerWin.urlData['personallife']['LEFTMENU']

  );

4、Event事件异同

•当前的浏览器主要存在IE和DOM两种不同的事件模型
系统前端实现多浏览器兼容
 以上的写法在非IE的浏览器上不支持,获取不到event事件,需要改成以下写法:

系统前端实现多浏览器兼容
 
5、对象元素获取
•在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在火狐中不能。:

  parent.aliasInput.innerHTML=" <input type='hidden' name='alias' value='"+$("#userID").val()+"' >"

•parent.showInputAlias.innerHTML=$("#userID").val();
•改为:
•parent.document.getElementById("aliasInput").innerHTML=" <input type='hidden' name='alias' value='"+$("#userID").val()+"' >"
•parent.document.getElementById("showInputAlias").innerHTML=$("#userID").val();
 
6、Disabled属性
•var resendLinkObj = $("#resendLink")[0];
•resendLinkObj.setAttribute("href","#"); 
•resendLinkObj.setAttribute("disabled","true");

  火狐及其它浏览器不支持 disabled属性

只能用css实现此功能(链接变灰)

$("#resendLink").addClass("color_999");

7、CSS @import 标记

•由于此页面引用了下面两个css导致,firefox添加提醒功能,点击“保存”按钮,没有弹出添加成功窗口
•<link href="css1.css" rel="stylesheet" type="text/css">
•<link href="css2.css" rel="stylesheet" type="text/css">
•因为上面的css通过import引用了其他的css
•在非IE浏览器下是不支持的
 
8、其它
* $("#insuranceLoginForLinkBind")[0].click()
此种是非jquery方式,需要统一为jquery方式
$("#insuranceLoginForLinkBind").click();
 
 * var obj = top.frames['body'].frames['left'].document.all.[menuId];
 obj.click();
 改为:
 var obj = top.frames['body'].frames['left'].document.getElementById(menuId);
 clickEvent(obj,"click");
* 属性值获取
$(this)[0].getAttribute("checked")||$(this)[0].checked) 

相关推荐