最近在做系统的B/S部分,用DWR做Ajax处理,期间遇到一些浏览器兼容的问题,table.insertRow()row.insertCell() 在IE下没有问题,但在FireFox下无效。同事说不用考虑FireFox的兼容,客户使用的环境就是IE。我偏执的认为就算不在所有浏览器下通过,至少在我的Fi reFox下需要正常运行。

晚上花了一点时间稍微研究了一下跨浏览器开发JavaScript时要注意的问题,的确好多学问。我对JavaScript的认识还太浅,得花时间做一些功课了。

顺便推荐一本JavaScript书《JavaScript语言精粹 》,是大名鼎鼎的"O'Reilly"系列,我只看了试读的第一章节,斗胆推荐

随网之舞《JavaScript语言精粹》 @ 随网之舞有更详细的介绍。

image

传送门:

购买《JavaScript语言精粹 》via China-Pub

评论 《JavaScript语言精粹》via 豆瓣

样章阅读第一章. 精华 第十章. 优美的特性

以下文章没有URL出处,作者 liqun,来源:www.comecode.com(连接已失效)

××××××××××想回家的分割线××××××××××

1、向表中追加行

定义table时使用tbody元素,以保证包括IE在内的所有浏览器可用

例:定义如下一个空表

&n; bsp_place_holder;

向这个表中增加行的正确做法是,把行增加到表体,而不是增加到表。

Var cell = document.createElement("td").appendChild(document.createTextNode("foo"));

Var row = document.createElement("tr").appendChild(cell);

Document.getElementById("myTableBody").appendChild(row);

*IE中需要先创建行,再创建列,再创建内容

2、设置元素的样式

Var spanElement = document.getElementById("mySpan");

//下面写法保证出IE外,所有浏览器可用

spanElement.setAttribute("style","font-weight:bold;color:red;");

//下面的写法保证IE可用

spanElement.style.cssText="font-weight:bold;color:red;";

3、设置元素的class属性

Var element = document.getElementById("myElement");

//下面的写法保证除IE外,所有浏览器可用

Element.setAttribute("class","styleClass");

//下面写法保证IE可用

Element.setAttribute("className","styleClass");

4、创建输入元素

Var button = document.createElement("input");

//单行文本框、复选框、单选框、单选钮、按钮需要此属性区别

Button.setAttribute("type","button");

Document.getElementById("formElement").appendChild(button);

5、向输入元素增加事件处理程序

Var formElement=document.getElementById("formElement");

//所有浏览器可用

formElement.onclick=function(){doFoo();};

//除IE外,所有浏览器可用

formElement.setAttribute("onclick","doFoo();");

6、创建单选钮

If(document.uniqueID){

&n bsp_place_holder; //Internet Explorer

&n bsp_place_holder; Var radioButton=document.createElement("");

}else{

&n bsp_place_holder; //Standards Compliant

&n bsp_place_holder; Var radioButton=document.createElement("input");

&n bsp_place_holder; radioButton.setAttribute("type","radio");

&n bsp_place_holder; radioButton.setAttribute("name","radioButton");

&n bsp_place_holder; radioButton.setAttribute("value","checked");

}

7、insertRow,insertCell,deleteRow

在IE中,table.insertRow()如果没有指定参数,则在表格后面添加行,默认参数位-1;如果在Firefox中,则一定要加参数,如:insertR ow(-1)。


原文链接: https://blog.alswl.com/2010/01/development-of-cross-browser-javascript-should-pay-attention-to-the-problem/
3a1ff193cee606bd1e2ea554a16353ee
欢迎关注我的微信公众号:窥豹

Comments

comments powered by Disqus