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

浏览器概述

浏览器是指可以显示网页服务器或者文件系统的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)