以下是转的javaeye的帖子 我感觉很好,所以放在这儿,具体地址是
[url] http://www.iteye.com/topic/1113840[/url]
写了一个多月js,感觉如今可不比几年前只有ie6的年代,而且过去只是用js写个ajax或者是简单的表单验证,可如今写一个稍微复杂点的小应用,要兼容所有浏览器,才发现真是太难了,难怪fe是一个独立的工种,有别于我们这些java工程师了。
如果你也不是专业fe,那么估计也会跟我一样在这些地方翻船,或许你所遇到的情况比我这些还多,那么欢迎补充。
1 首先是最简单的select标签,就有诸多不兼容:
a、 clonenode方法,对于非ie浏览器没有问题,对于ie浏览器,我遇到的问题包括:
1)option selected的会clone不过去,然后会将第一个option作为selected值
2)事件clone也会有问题
b、readonly:对于ie6,可以通过以下方法将select设为readonly:
obj.onbeforeactive=function(){return false}
obj.οnfοcus=function(){obj.blur();}
obj.οnmοuseοver=function(){obj.setcapture();}
obj.οnmοuseοut=function(){obj.releasecapture();}
对于其他浏览器,我采用的是元素替代法,动态创建一个input标签,把值赋给它,然后将select隐藏。
c、select的z-index对于ie6无效,网上有很多关于这个讨论,jquery采用一个iframe搞定
d、动态添加option的方法不同,这个网上一搜一大堆
e、对于onclick和onchange的响应不同,在ff下可以在onclick select时动态读取option值然后构建option,然后选中一个值后执行onchange事件,但是ie下不能这样做。
2 css对offsetwidth之类的理解不同
http://newleague.iteye.com/blog/765535
3 对于vertical-align baseline的理解不同:
http://w3help.org/zh-cn/causes/rd1016
4 设置背景色
element.style.backgroundcolor
在firefox下想改变颜色,必须先设为null,再设为其他颜色才行,即先取消原来的颜色。
在ie下,想取消颜色,必须设为''才行,而换其他颜色,无需先去掉之前的颜色,而如果你设成了null,反倒不行了。
5 不同浏览器去padding的理解不同
6 不同浏览器对强制换行和强制不换行的理解不同:
http://www.cftea.com/c/2009/01/qpdzu40mnw8fyyg3.asp
最恶心的是对于ie6,如果是<td><span>我是蚊子</span></td>,那么在td上写了word-break:keep-all依然无效,必须在span上也写。
7 获得head节点的方式不同
在firefox下可以用window.head,而所有浏览器都兼容的方式是document.getelementsbytagname('head')[0]
8 往head上添加css code的方法不同,也就是动态添加<style>标签。
ie下可以用var style=document.createstylesheet();style.csstext=csscode;
而有文章说,在windows上的ie,用createstylesheet返回的是styleelement的stylesheet,而在mac上返回的是styleelement自己。
在其他浏览器下需要document.createelement('style');
然后还有区分是否具有stylesheet属性。
这个很容易搜到。
9 对于onchange事件,firefox浏览器可以注册在table,div等组件上,然后通过冒泡,拦截input,select等发出的事件,而ie不行,必须绑定到相应的组件上
10 将input设为readonly=true,其依然会响应keypress,keyup,keydown,onblur事件
11 ie和非ie对于停止冒泡和取消默认行为的方法不同
12 大家都知道ie和非ie在动态添加事件时使用的方法不同,ie是attachevent,其他是addlistener,然后参数也不同。更重要的是如果一个控件绑定了多个function,他们绑定和执行的顺序是不同的,ie是跟绑定顺序相反,其他是跟绑定顺序相同
13 获得当前事件不同,一个是window.event一个是直接接受event
14 ff下执行offset系列非常慢,但是ie下比较快,而ie的改变css的执行非常慢。
firefox6比firefox3.6速度快的多,相差好几百倍(针对一个400行*50列的表格的js处理)
15 如果大量动态改变css,那么使用document.createdocumentfragment,然后将需要修改样式的dom获取出来appendchild到这个临时的fragment上,修改完css后再append回去即可,这样性能能差好几百倍。
16 浏览器加载网页时,顺序读取html,遇到外部js链接会读进来,然后按顺序执行,边解释边执行,而对于外部css,图片等则是启动另外的线程连接服务器去获取。
ie对于css引入有限制,我没试过,但有篇文章讨论:http://blog.youkuaiyun.com/ydshang/article/details/4158211
17 表格定位某一行,可以通过改变scrolltop来实现,当然如果出现了滚动条的话
18 ie的dom用完要记得释放,可以在unload方法中,否则会出现内存泄露
19 unload方法在各个浏览器里各不相同,我之前的文章里有介绍。http://sslaowan.iteye.com/blog/1128209
20 我知道了为什么fe最喜欢的浏览器是ff,最讨厌的是ie6,恨不得ie6去死,其他ie也不怎么样。但是chrome,opera也各有各的bug
21 ajax当使用同步模式时,如果访问的链接是错误的,那么ff会在控制台报错,而ie会直接弹出个对话框,然后就崩溃了。
22 ff支持document.getelementsbyclass等方法,ie不支持,可以自己写一个。
23 trim方法在ie和ff下不同,需要自己写一个,可以用正则表达式
24 动态设置元素的css class在ie和非ie浏览器下也不同
25 有时本地字体库会影响你的字体,大小等显示,但是有时甚至会影响你的布局
26 字符串也可以使用><等符号比较大小,但是是字符串比较,不要被骗了。
27 js中this问题非常让人困惑
28 判断浏览器可以有很多方法,主流是两大类,agent判断法和特性法,后者好像更推荐
29 js是面向对象语言,对象.属性=值 只影响当前对象,而对象.prototype.属性则影响整个类。非ie浏览器可以覆盖dom对象的类方法,但是ie不行。
30 getcomputedstyle,获得外部添加的css,ff支持,ie不支持,具体看这篇文章http://www.jb51.net/article/16128.htm
31 ie和chrome支持outerhtml方法,其他浏览器没有。相关讨论:http://walsh.iteye.com/blog/261966,http://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox
32 还有一个特悲剧的,ie下会把document.[formname.]控件id当成那个控件,如果把一个控件比如input的id设为了submit,那么form.submit()就会报错。
2011-8-25add
33 如果利用全角空格进行布局时,firefox支持,而ie会去除只剩一个,但是是在某些情况下的,具体看这篇文章:http://w3help.org/zh-cn/causes/bt1025
34 透明度:
filter:alpha(opacity=0); /* ie */
-moz-opacity:0.3; /* moz + ff */
opacity: 0.3;
至于用不用var的区别,undefined和null的区别,ajax构建的不同方式,这些一般的java程序员都了解了。
很多java程序员也会使用js框架,比如jquery,extjs和dojo,她们都帮我们屏蔽了很多兼容性问题。
dojo提供了java一样的面向对象机制。
抛砖引玉,你还遇到过什么陷阱,那些fe都知道,而我们java工程师不知道?
有同学要求例子,有些只是小知识,有了链接,那么给一个我做的过程中写的实验程序吧,主要是验证select,还有readonly之后的input对于keypress等事件的响应:
其他有用的帖子:
1 javascript在ie和firefox中的不同表现http://www.iteye.com/topic/920575(即将被隐藏,说是dw上的文章,但是没找到原文,而且此文下有补充回复)
2 javascript与css在ie和firefox中的误区及区别javascript与css在ie和firefox中的误区及区别(此贴即将成为精华帖)
3 javascript在ie和firefox下的兼容性问题javascript在ie和firefox下的兼容性问题(此贴即将成为新手帖)
[url=http://w3help.org/zh-cn/causes/index.html]http://w3help.org/zh-cn/causes/index.html[/url]
[url] http://www.iteye.com/topic/1113840[/url]
写了一个多月js,感觉如今可不比几年前只有ie6的年代,而且过去只是用js写个ajax或者是简单的表单验证,可如今写一个稍微复杂点的小应用,要兼容所有浏览器,才发现真是太难了,难怪fe是一个独立的工种,有别于我们这些java工程师了。
如果你也不是专业fe,那么估计也会跟我一样在这些地方翻船,或许你所遇到的情况比我这些还多,那么欢迎补充。
1 首先是最简单的select标签,就有诸多不兼容:
a、 clonenode方法,对于非ie浏览器没有问题,对于ie浏览器,我遇到的问题包括:
1)option selected的会clone不过去,然后会将第一个option作为selected值
2)事件clone也会有问题
b、readonly:对于ie6,可以通过以下方法将select设为readonly:
obj.onbeforeactive=function(){return false}
obj.οnfοcus=function(){obj.blur();}
obj.οnmοuseοver=function(){obj.setcapture();}
obj.οnmοuseοut=function(){obj.releasecapture();}
对于其他浏览器,我采用的是元素替代法,动态创建一个input标签,把值赋给它,然后将select隐藏。
c、select的z-index对于ie6无效,网上有很多关于这个讨论,jquery采用一个iframe搞定
d、动态添加option的方法不同,这个网上一搜一大堆
e、对于onclick和onchange的响应不同,在ff下可以在onclick select时动态读取option值然后构建option,然后选中一个值后执行onchange事件,但是ie下不能这样做。
2 css对offsetwidth之类的理解不同
http://newleague.iteye.com/blog/765535
3 对于vertical-align baseline的理解不同:
http://w3help.org/zh-cn/causes/rd1016
4 设置背景色
element.style.backgroundcolor
在firefox下想改变颜色,必须先设为null,再设为其他颜色才行,即先取消原来的颜色。
在ie下,想取消颜色,必须设为''才行,而换其他颜色,无需先去掉之前的颜色,而如果你设成了null,反倒不行了。
5 不同浏览器去padding的理解不同
6 不同浏览器对强制换行和强制不换行的理解不同:
http://www.cftea.com/c/2009/01/qpdzu40mnw8fyyg3.asp
最恶心的是对于ie6,如果是<td><span>我是蚊子</span></td>,那么在td上写了word-break:keep-all依然无效,必须在span上也写。
7 获得head节点的方式不同
在firefox下可以用window.head,而所有浏览器都兼容的方式是document.getelementsbytagname('head')[0]
8 往head上添加css code的方法不同,也就是动态添加<style>标签。
ie下可以用var style=document.createstylesheet();style.csstext=csscode;
而有文章说,在windows上的ie,用createstylesheet返回的是styleelement的stylesheet,而在mac上返回的是styleelement自己。
在其他浏览器下需要document.createelement('style');
然后还有区分是否具有stylesheet属性。
这个很容易搜到。
9 对于onchange事件,firefox浏览器可以注册在table,div等组件上,然后通过冒泡,拦截input,select等发出的事件,而ie不行,必须绑定到相应的组件上
10 将input设为readonly=true,其依然会响应keypress,keyup,keydown,onblur事件
11 ie和非ie对于停止冒泡和取消默认行为的方法不同
12 大家都知道ie和非ie在动态添加事件时使用的方法不同,ie是attachevent,其他是addlistener,然后参数也不同。更重要的是如果一个控件绑定了多个function,他们绑定和执行的顺序是不同的,ie是跟绑定顺序相反,其他是跟绑定顺序相同
13 获得当前事件不同,一个是window.event一个是直接接受event
14 ff下执行offset系列非常慢,但是ie下比较快,而ie的改变css的执行非常慢。
firefox6比firefox3.6速度快的多,相差好几百倍(针对一个400行*50列的表格的js处理)
15 如果大量动态改变css,那么使用document.createdocumentfragment,然后将需要修改样式的dom获取出来appendchild到这个临时的fragment上,修改完css后再append回去即可,这样性能能差好几百倍。
16 浏览器加载网页时,顺序读取html,遇到外部js链接会读进来,然后按顺序执行,边解释边执行,而对于外部css,图片等则是启动另外的线程连接服务器去获取。
ie对于css引入有限制,我没试过,但有篇文章讨论:http://blog.youkuaiyun.com/ydshang/article/details/4158211
17 表格定位某一行,可以通过改变scrolltop来实现,当然如果出现了滚动条的话
18 ie的dom用完要记得释放,可以在unload方法中,否则会出现内存泄露
19 unload方法在各个浏览器里各不相同,我之前的文章里有介绍。http://sslaowan.iteye.com/blog/1128209
20 我知道了为什么fe最喜欢的浏览器是ff,最讨厌的是ie6,恨不得ie6去死,其他ie也不怎么样。但是chrome,opera也各有各的bug
21 ajax当使用同步模式时,如果访问的链接是错误的,那么ff会在控制台报错,而ie会直接弹出个对话框,然后就崩溃了。
22 ff支持document.getelementsbyclass等方法,ie不支持,可以自己写一个。
23 trim方法在ie和ff下不同,需要自己写一个,可以用正则表达式
24 动态设置元素的css class在ie和非ie浏览器下也不同
25 有时本地字体库会影响你的字体,大小等显示,但是有时甚至会影响你的布局
26 字符串也可以使用><等符号比较大小,但是是字符串比较,不要被骗了。
27 js中this问题非常让人困惑
28 判断浏览器可以有很多方法,主流是两大类,agent判断法和特性法,后者好像更推荐
29 js是面向对象语言,对象.属性=值 只影响当前对象,而对象.prototype.属性则影响整个类。非ie浏览器可以覆盖dom对象的类方法,但是ie不行。
30 getcomputedstyle,获得外部添加的css,ff支持,ie不支持,具体看这篇文章http://www.jb51.net/article/16128.htm
31 ie和chrome支持outerhtml方法,其他浏览器没有。相关讨论:http://walsh.iteye.com/blog/261966,http://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox
32 还有一个特悲剧的,ie下会把document.[formname.]控件id当成那个控件,如果把一个控件比如input的id设为了submit,那么form.submit()就会报错。
2011-8-25add
33 如果利用全角空格进行布局时,firefox支持,而ie会去除只剩一个,但是是在某些情况下的,具体看这篇文章:http://w3help.org/zh-cn/causes/bt1025
34 透明度:
filter:alpha(opacity=0); /* ie */
-moz-opacity:0.3; /* moz + ff */
opacity: 0.3;
至于用不用var的区别,undefined和null的区别,ajax构建的不同方式,这些一般的java程序员都了解了。
很多java程序员也会使用js框架,比如jquery,extjs和dojo,她们都帮我们屏蔽了很多兼容性问题。
dojo提供了java一样的面向对象机制。
抛砖引玉,你还遇到过什么陷阱,那些fe都知道,而我们java工程师不知道?
有同学要求例子,有些只是小知识,有了链接,那么给一个我做的过程中写的实验程序吧,主要是验证select,还有readonly之后的input对于keypress等事件的响应:
<head><script> function addlistener(element,e,fn){ if(element.addeventlistener){ element.addeventlistener(e,fn,false); } else { element.attachevent("on" + e,fn); } } function geteventsource(event){ event = window.event?window.event:event; var source = event.target || event.srcelement; return source; } function init(e){ var provchoice= document.getelementbyid('prov'); fillpro(provchoice); addlistener(provchoice,'change',fillcity); var cochoice= document.getelementbyid('country'); addlistener(cochoice,'change',function(){alert('a');}); var selects=document.getelementsbytagname('select'); for(var i=0;i<selects.length;i++){ selects[i].clonenode=function(deep){ var temp=document.createelement('div'); temp.innerhtml=this.outerhtml; return temp.childnodes[0]; } } document.getelementbyid('cloneco').appendchild(cochoice.clonenode(true)); var cotd= document.getelementbyid('co'); document.getelementbyid('r1').appendchild(cotd.clonenode(true)); document.getelementbyid('abc').readonly=true; document.getelementbyid('abc').onkeydown=function(e){ e.preventdefault(); e.stoppropagation(); } document.getelementbyid('abc').onkeypress=function(e){ alert('b'); } document.getelementbyid('abc').onchange=function(e){ alert('c'); } document.getelementbyid('abc').onblur=function(e){ alert('d'); document.getelementbyid('abc').value='add'; } } function fillpro(pro){ pro.options[0]=new option('bj','北京'); pro.options[1]=new option('tj','天津'); pro.options[2]=new option('hlj','黑龙江'); pro.options[3]=new option('sh','上海'); } function fillcity(e){ var c= document.getelementbyid('city'); if( document.getelementbyid('prov').value=='黑龙江'){ c.options[0]=new option('hrb','哈尔滨'); c.options[1]=new option('mdj','牡丹江'); c.options[2]=new option('qqhr','齐齐哈尔'); c.options[3]=new option('jms','佳木斯'); } } </script></head><body onload='init(event)'> <table> <tr id='r1'> <td id='co'> <select id='country' name='country'> <option value='uk'>uk</option> <option value='usa'>usa</option> <option value='china' selected>china</option> </select> </td> <td> <select id='prov' name='prov'></select> </td> <td> <select id='city' name='city'></select> </td> <td id='cloneco'></td> <td> <input id='abc' value='0' onkeypress='return alert("a1"); '/> </td> <tr> <table></body></html>
其他有用的帖子:
1 javascript在ie和firefox中的不同表现http://www.iteye.com/topic/920575(即将被隐藏,说是dw上的文章,但是没找到原文,而且此文下有补充回复)
2 javascript与css在ie和firefox中的误区及区别javascript与css在ie和firefox中的误区及区别(此贴即将成为精华帖)
3 javascript在ie和firefox下的兼容性问题javascript在ie和firefox下的兼容性问题(此贴即将成为新手帖)
[url=http://w3help.org/zh-cn/causes/index.html]http://w3help.org/zh-cn/causes/index.html[/url]