|
锁定老帖子 主题：Java工程师不知道的那些FE潜规则
精华帖 (1) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-08-23
最后修改：2011-08-25
写了一个多月JS，感觉如今可不比几年前只有IE6的年代，而且过去只是用JS写个Ajax或者是简单的表单验证，可如今写一个稍微复杂点的小应用，要兼容所有浏览器，才发现真是太难了，难怪FE是一个独立的工种，有别于我们这些Java工程师了。 32 还有一个特悲剧的，IE下会把document.[formname.]控件Id当成那个控件，如果把一个控件比如input的id设为了submit，那么form.submit()就会报错。 33 如果利用全角空格进行布局时，Firefox支持，而IE会去除只剩一个，但是是在某些情况下的，具体看这篇文章：http://w3help.org/zh-cn/causes/BT1025 34 透明度： filter:alpha(opacity=0); /* IE */ -moz-opacity:0.3; /* Moz + FF */
有同学要求例子，有些只是小知识，有了链接，那么给一个我做的过程中写的实验程序吧，主要是验证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下的兼容性问题（此贴即将成为新手帖）
强烈推荐此网站： 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-08-23
赞，如果有例子久好了
|
| 返回顶楼 | |
|
发表时间：2011-08-24
最后修改：2011-08-25
Frontend Engineer?
有很多东西并不是所有FE都知道，至少我是这样。。。 我也碰到过很多IE坑爹的问题，数不胜数啊，帮你补充一些： 1. IE不支持inline-block，需要inline + hasLayout 2. 各种莫明其妙的布局bug，比如2px bug、3px bug 3. 最常见的JS错误是： {a:1,b:2,} （其它浏览器都能纠正，IE不行） 4. setInterval或setTimeout触发的JS中调用activex方法阻塞后，其它JS还能继续跑，并且clearInterval与clearTimeout失效。 5. IE8下form、button、input、select、textarea、a、img、object标签都会产生泄漏，移除也不会释放内存，碰到长时间运行、每几秒就用JS更新一次的页面，那就是杯具。 6. mousedown与focus的bug ......实在太多了，一时也想不起来，坑爹啊 从这里就可以看出一个JS框架的重要性 |
| 返回顶楼 | |
|
发表时间：2011-08-24
clue 写道 Frontend Engineer?
有很多东西并不是所有FE都知道，至少我是这样。。。 我也碰到过很多IE坑爹的问题，数不胜数啊，帮你补充一些： 1. IE不支持inline-block，需要inline + hasLayout 2. 各种莫明其妙的布局bug，比如2px bug、3px bug 3. 最常见的JS错误是： [1,2,3,] （其它浏览器都能纠正，IE不行） 4. setInterval或setTimeout触发的JS中调用activex方法阻塞后，其它JS还能继续跑，并且clearInterval与clearTimeout失效。 5. IE8下form、button、input、select、textarea、a、img、object标签都会产生泄漏，移除也不会释放内存，碰到长时间运行、每几秒就用JS更新一次的页面，那就是杯具。 6. mousedown与focus的bug ......实在太多了，一时也想不起来，坑爹啊 从这里就可以看出一个JS框架的重要性 慢慢想，想到了就在这回复一下呗 |
| 返回顶楼 | |
|
发表时间：2011-08-24
建议作者看一般书<javascript高级程序设计>, 书的作者是尼古拉斯 ，此书里面对于浏览器的兼容性有很详细的code解释
|
| 返回顶楼 | |
|
发表时间：2011-08-24
前端工程师貌似挺火
|
| 返回顶楼 | |
|
发表时间：2011-08-24
ximenblog 写道 建议作者看一般书<javascript高级程序设计>, 书的作者是尼古拉斯 ，此书里面对于浏览器的兼容性有很详细的code解释
正在看此书 |
| 返回顶楼 | |
|
发表时间：2011-08-24
我进来只是想晓得啥叫FE...
|
| 返回顶楼 | |
|
发表时间：2011-08-25
chenhao_yssy 写道 我进来只是想晓得啥叫FE...
同问，啥叫FE？ |
| 返回顶楼 | |
|
发表时间：2011-08-25
EldonReturn 写道 chenhao_yssy 写道 我进来只是想晓得啥叫FE...
同问，啥叫FE？ firefox和IE？ 最近正想好好的梳理下自己的JS水平，好好的学习下 |
| 返回顶楼 | |
