写了一个多月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.onfocus=function(){obj.blur();} obj.onmouseover=function(){obj.setCapture();} obj.onmouseout=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>我是蚊子</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.csdn.net/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等事件的响应:
- <html>
-
<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中的不同表现(即将被隐藏,说是DW上的文章,但是没找到原文,而且此文下有补充回复)
2 Javascript与CSS在IE和Firefox中的误区及区别(此贴即将成为精华帖)
3 JavaScript在IE和Firefox下的兼容性问题(此贴即将成为新手帖)
强烈推荐此网站:
http://w3help.org/zh-cn/causes/index.html |