对于大多数程序员而言在平时的编码过程中很少会注意到跨浏览器的问题,而当这些问题从用户那边被抛回来后才知道原来问题还是很严重的。在正式规范、事实标准以及各种实现之间存在的差异会让你觉得很烦躁。所以就需要我们在平时养成良好的编码习惯,尽量保证我们的代码能够适应不同浏览器的要求。
下面就把平时遇到的一些浏览器差异问题总结出来,千里之行,始于足下。虽然不能完全避免开发中浏览器兼容问题,但是还是一点点的努力吧。
1、Ajax请求
IE: new ActiveXObject()
FF、Chrome:new XMLHttpRequest()
解决办法 统一封装创建XMLHttpRequest对象的方法
-
-
-
-
- function createXmlHttpRequest(){
- var xmlHttp ;
- try{
-
- xmlHttp = new XMLHttpRequest();
- }catch(e){
- try{
-
- xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
- }catch(e){
- try{
-
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- }catch(e){
- alert("提示: 您的浏览器暂时不支持Ajax请求!");
- return false;
- }
- }
- }
- return xmlHttp;
- }
2、XML解析处理
暂时解决不了。。。
3、集合类对象的()与[]的问题
IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象。
- document.write(document.forms("formName").src);
-
解决办法:将document.forms("formName")改为 document.forms["formName"]。统一使用[]获取集合类对象。
4、对浏览器Native组件调用属性、方法大小写问题
IE:不区分大小写
FF、Chrome:区分大小写
如:Ajax返回的response对象,IE支持response.responseXml和responseXML;FF等浏览器支持response.responseXML,解决办法只有在编写程序时尽量避免不兼容的写法。
5、document.all问题
暂未解决
6、window.event问题
IE:支持
FF、Chrome:不支持,只能通过参数传入方法
注意在不同浏览器中event对象api也不同。如IE下通过event.srcElement获得事件触发HTML元素,而FF、Chrome通过event.target获得。
解决方法:程序编写时避免,或是使用一些Ext、Jquery等JS类库来统一操作。
7、获取HTML元素
IE:支持el.name 、el.getAttribute(name)
FF、Chrome:基本属性支持el.name其余属性仅支持el.getAttribute(name)
解决方法: 统一采用标准方法el.getAttribute(name)获取
8、new Date().getYear()
分析原因:在IE中得到的日期是2011,在FF和Safari中看到的日期是111,原因是在FF和safari返回的是当前年份-1900的值。
兼容处理:
-
- var year= new Date().getYear();
- year = (year<1900?(1900+year):year);
- document.write(year);
-
- var year = new Date().getFullYear();
- document.write(year);
-
9、innerText的使用
【分析原因】
FF不支持innerText,它支持textContent来实现innerText,不过textContent没有像innerText一样考虑元素的display方式,所以不完全与IE兼容。如果不用textContent,字符串里面不包含HTML代码也可以用innerHTML代替。
【兼容处理】
通过判断不同浏览器做不同的处理
- if(document.all){
- document.getElementById('element').innerText = "mytext";
- } else{
- document.getElementById('element').textContent = "mytext";
- }
注:Safari和Chrome对innerText和textContent都支持。
10、Frame的引用
【分析原因】
IE可以通过id或者name访问这个frame对应的window对象;而FF只可以通过name来访问这个frame对应的window对象。
【应用场景】
在一个页面嵌套了一个iframe页面(下面简称父页面和子页面)。父页面取子页面的值。
<iframe id="frame_id" src="frametest.jsp" width="100%" height="100%" title="你好世界">
|
此时如果父页面想获取子页面例如div中的显示值,IE下可以这样写:
var obj = window.top.frame_id.document.getElementById(div_id);
alert(obj.innerText);
但是在FF中却无法取子页面中的值,原因就是FF只支持window.top.frameName来访问子页面中的window对象。所以在IE、safari中是支持通过frameName或是frameId来访问子页面window对象的。
解决方法:1、尽量都是用frameName去访问子页面window对象。
2、在FF、IE、Safari中都支持window.document.getElementById(frameId)来获得子页面window对象。
转载自:http://yaya-wiscom.iteye.com/blog/1140521
分享到:
相关推荐
javascript解决浏览器兼容性问题
本文是软件开发网小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧! 1. children与childNodes IE提供的children、childNodes和firefox下...
主要介绍了css与javascript跨浏览器兼容性,包括常见的css兼容性问题与javascript兼容性问题,以及IE与Firefox等常用浏览器的兼容性分析,需要的朋友可以参考下
能解决各种javascript在各大浏览器中的不兼容问题,让不兼容的程序兼容各大浏览器
web前端浏览器兼容性问题,以及其他新知识点:例如SEO javascript mate等问题
最新最全的javascript和css浏览器兼容手册,欢迎有需要的下载,
显示农历的JavaScript,高浏览器兼容性。兼容IE、FireFox、Chrome、Opera、Safari等浏览器,显示效果完全一样。 显示效果示例: 2009年11月3日 星期二 【牛】甲戌月 壬子日 己丑年 九月十七 可在尾部自己修改...
javascript解决innerText浏览器兼容问题思路代码.docx
本文总结分析了Javascript在IE和Firefox浏览器常见兼容性问题。分享给大家供大家参考,具体如下: 表单 document.formName.item("itemName") IE:可以使用document.formName.item(“itemName”)或document.formName...
jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave ...
浏览器兼容性测试 此示例显示如何运行测试以找出人们使用的浏览器版本并提供基于应用程序的警报。 这对于旧浏览器不完全支持的许多更现代的地图应用程序很有用。
兼容性超好的三个HTML视频播放器代码,vediojs,hlsplayer;flowplayer,亲测能用,兼容绝大多数手机浏览器,其中vediojs,hlsplayer;兼容性比flowplayer更好
最近发布的ECMAScript2625.1修正了之前5.0中的一些缺陷,并引入了用来测试JavaScript兼容性的Test262在线测试。 最近发布的ECMAScript2625.1修正了之前5.0中的一些缺陷,并引入了用来测试JavaScript兼容性的Test...
不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题,毕竟这两中浏览器是占了绝大多数。
Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3、FF:...
DIV向上滚动JavaScript示例, 可用于实现新闻滚动效果,很简洁。 测试可兼容于IE、FireFox、Chrome、Opera、Safari等浏览器。
JavaScript文件,解决了项目中文件在线浏览时浏览器兼容性问题。使得所有浏览器都可以正常在线浏览。