当前位置:首页 > 商讯 >

IE、Safari、Chrome浏览器JavaScript兼容性改造总结

编辑:北京飞炫空间展览展示有限公司 时间:2017-09-05 12:16:34阅读次数:2
IE、Safari、Chrome浏览器JavaScript兼容性改造总结

1.1 浏览器内核差别
1.2. Safari和Chrome浏览器简介
Safari和Chrome,一个是苹果公司MAC OS系统的浏览器,一个是Google开发的浏览器,它们都使用了同样的内核webkit,关于webkit,有如下简介。
   WebKit 是一个开源浏览器网页排版引擎,与之相应的引擎有Gecko(Mozilla,Firefox 等使用的排版引擎)和Trident(也称为MSHTML,IE 使用的排版引擎)。同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称,主要用于Safari,Dashboard,Mail 和其他一些Mac OS X 程序。WebKit 所包含的 WebCore 排版引擎和 JSCore 引擎来自于 KDE 的 KHTML 和 KJS,当年苹果比较了 Gecko 和 KHTML 后,仍然选择了后者,就因为它拥有清晰的源码结构、极快的渲染速度。
  目前使用WebKit 引擎的浏览器主要有:Safari(apple出品),Midori,chrome(google出品)等。
1.3. 改造问题汇总
在改造过程的测试及排查中,总结排查出来的共同点一共有以下数十点:
1.2.1 document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或document.formName.item["itemName"]或document.formName.elements["elementName"];
W3C标准,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].

1.2.2 集合类对象问题
说明:IE下,可以使用()或[]获取集合类对象; Safari及Chrome下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.

1.2.3 各种style描述需严格大小写
说明:IE下,各种CSS属性大小写要求不严格,均能正确操作。
Safari及Chrome下出现过因为大小写问题无法正确解析的情况,建议严格大小写。
解决方法:统一严格按照CSS属性大小编写。

1.2.4 自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性; 在Safari和Chrome下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
实例:<input type='text' id='comdiv' paic='it' style='display:block' style='font-size: 20pt;' size='4'/>
IE下可以使用element.paic获取,站群系统,在Safari和Chrome下只需要使用element. getAttribute('paic')

1.2.5 元素中不能有一处以上的style描述
说明:IE下,一个元素中可以多次style的定义,Safari及Chrome下,若有多次描述无法生效。 解决方法:统一元素中只存在一处的style描述。.
示例:<input type='text' id='comdiv' style='display:block' style='font-size: 20pt;' size='4'/>
在IE下,示例中的两处style定义都会加载,在Safari和Chrome下只有第一处style会被加载。

1.2.6 eval("idName")问题
说明: 在Safari、Chrome及IE下,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.

1.2.7 变量名与某HTML对象ID相同的问题
说明:IE、 Safari及Chrome下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.

1.2.8 获取对象方式
HTML对象的 id和name 在IE使用getElementByID都会找到,在Safari及Chrome中name是找不到的,专题系统,必须严格使用getElementByID和getElementsByName.
解决方法:
id使用getElementByID
name使用getElementsByName

1.2.9 input.type属性问题
说明:IE下input.type属性为只读;但是在Safari及Chrome中下input.type属性为读写.
<input type='text' id='comdiv' size='4'/>
Safari及Chrome下,可以使用 comdiv.type ='button' 修改type类型。

1.2.10 模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口; 在Safari及Chrome中则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

1.2.11 cursor:hand 和 cursor:pointer
firefox不支持hand,但ie、Safari及Chrome中支持pointer
解决方法: 统一使用pointer

1.2.12 对select的options集合操作
枚举元素除了[]外,SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在两种浏览器上使用。注意在add后赋值元素,否则会失败。

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:襄阳SEO http://xiangyang.raoyu.net

上一篇:PHP分页类代码 下一篇:最后一页

相关阅读