开发跨浏览器javascript常见注意事项


Posted in Javascript onJanuary 01, 2009

一、向表追加行
在以往使用Ajax的经历中,你很可能会使用JavaScript向现有的表中追加行,或者从头创建包含表行的新表。document.createElement和document.appendChiid方法可以使这很容易做到,只需使用document.createElement创建表单元格,再使用document.app-endChild方法将这些表单元格增加到表行。接下来的编辑步骤是使用document.append-
Child将表行增加到表中。
在Firefox、Safari和Opera等当前浏览器中,这样做是可以的。不过,如果使用的是lE,表行则不会在表中出现。更糟糕的是,IE甚至不抛出任何错误,或对表行确实已经追加到表中却不会显示出来的问题提供任何线索。
在这种情况下,解决方法很简单。IE允许将tr元素增加到tbody元素,而不是直接增加到table元素。例如,如果定义一个空表如下:
<table id="myTable">
<tbody id="myTableBody"></tbody>
</table>
向这个表中增加行的正确做法是把行增加到表体,而不是增加到表,如下所示:
var cell=document.createElement("td").appendChild(document.createTextNode("foo"));
vat row=document.createElement("tr").appendChild(cell);
document.getElementByld("myTableBody").appendChiid(row);
辛运的是,这种方法在所有当前浏览器上都能用,也包括IE。如果你养成习惯,总是使用表中的表体,就不用担心这个问题了。
二 通过javascript设置元素的样式
利用Ajax技术,开发人员创建的Web应用可以与服务器无缝地通信,而无需完全页面刷新。但对于A1ax请求,是不会出现这种页面闪烁的,所以用户可能不知道页面上有些数据已经更新。你可能想修改某些元素的样式,指示页面上一些数据已经改变。例如,如果股票的价格已经通过Ajax请求得到了无缝更新,可以加亮显示这支股票的名字。
可以通过JavaScript使用元素的setAttribute方法设置元素的样式。例如,要把span元素中的文本修改为采用红色粗体显示.可以使用setAttribute疗法如下:
var spanElement = document.getElementById("mySpan");
spanElement.setAttribute("style", "font-weight:bold; color:red;");
除了IE、这种方法在当前其他浏览器上都是行得通的。对于IE,解决方法是使用元素style对象的cssText属性来设置所需的样式.尽管这个属性不是标准的,但得到了广泛支持,如下所示:
var spanElement = document.getElementById("mySpan");
spanElement.style.cssText = "font-weight:bold; color:red;";
这种方法在IE和大多数其他浏览器上部能很好地工作,只有Opera除外。为了让代码在所有当前浏览器上都可移植,可以同时使用这两种方法,也就是既使用setAttribute方法,也使用元素style对象的cssText属性,如下所示:
var spanElement = document.getElementById("mySpan");
spanElement.setAttribute("style", "font-weight:bold; color:red;");
spanElement.style.cssText = "font-weight:bold; color:red;";
这样一来,在当前所有浏览器上都能正常地设置元素的样式了。
三、设置元素的class属性
读过前一节后,了解到可以通过JavaScript来设置元素的内联样式,你可能想当然地认为,简单地设置无素的class属件应该是最容易的了。遗憾的是,并不如此。与设置元素内联样式类似,通过JavaScript动态地设置元素的class属性时也存在一些特异性。
你可能已经猜到了,IE是当前浏览器中的一个异类,不过解决方法倒也相当简单。使用Firefox和Safari之类的浏览器时,可以使用元素的setAttribute方法来设置冗素的class属性,如下所示:
var element = document.getElementById("myElement");
element.setAttribute("class", "styleC1ass");
奇怪的是,如果使用setAttribute方法,并指定属性名为class,IE并不会设置元素的class属性。相反,只使用setAttribute方法时IE会自己识别className属性。对于这种情况,完备的解决方法是:使用元素的setAttribute方法时,将class和className都用作属性名,如下所不:
var element = document.getElementById("myElement");
element.setAttribute("class", "styleC1ass");
element.setAttribute("className", "styleC1ass");
当前大多数浏览器都会使用class属性名而忽略className,IE则正好相反。
四、创建输入元素
输入元素为用户提供了与页面交互的手段。HTML本身有一组有限的输入元素,包括单行文本框、多行文本框、选择框、按钮、复选框和单选钮。你可能想使用JavaScfipt动态地刨建这样一些输入元素作为Ajax实现的一部分。
单行文本框、按钮、复选框和单选钮都可以创建为输入元素,只是type属性的值有所不同。选择框和文本区有自己特有的标记。通过JavaScript动态地创建输入元素很简单(但单选钮除外,这在“刨建单选钮”一节再做解释),只要遵循一些简单的规则就行。使用document.createElement方法可以很容易地创建选择框和文本区,只需向document.cr
eateElement传递元素的标记名,如select或textarea。
单行文本框、按钮、复选框和单选钮稍难一些,因为它们都有同样的元素名input,只是type属性的值不同。所以,要创建这些元素,不仅需要使用document.createElement方法,后面还要调用元素的setAttribute方法来设置type属性的值。这并不难,但确实要多加一行代码.
考虑在哪里把新创建的输入元素增加到其父元素中,必须注意document.createElement和setAttribute语句的顺序。在某些浏览器中,只有刨建了元素,而且正确地设置了type属性时,于会把新创建的元素增加到其父元素中。例如,以下代码段存某些浏览器中可能有奇怪的行为:
document.getElementById("formElement").appendChild(button);
button.setAttribute("type", "button");
为了避免奇怪的行为,要确保刨建输入元素后设置其所有属性,特别是type属性,然后再把它增加到父元素中,如下:
var button = document.createElement("input"):
button.setAttribute("type", "button");
document.getElementById("formElement").appendChild(button);
遵循这个简单的规则,有助于消除以后可能出现的一些难于诊断的问题。
五 向输入元素增加事情处理程序
向输入元素增加事件处理程序应该与使用setAttribute方法并指定事件处理程序的名字和所需函数处理程序的名字一样容易,对吗?错。设置元素的事件处理程序的标准做法是使用元素的setAttribute方法,它以事件名作为属性名,并把函数处理程序作为属性值.如下所示:
var formElement = document,getElementById("formElement");
formElement.setAttribute("onclick", "doFoo();");
除了IE上面的代码在所有当前浏览器中都能工作。如果在IE中使用JavaScfipt设置元素的事件处理程序,必须对元素使用点记法来引用所需的事件处理程序,非把它赋为匿名函数,这个匿名函数需要调用所需的事什处理程序,如下所示:
var formElement = document,getElementById("formElement");
formElement.onclick = function() { doFoo(); };
注意,是如何通过点记法从formElement引用onclick事件处理程序。onclick事什处理程序赋为一个匿名函数,这个匿名函数只是调用了所需的事件处理程序.在这个例子中事件处理程序就是doFoo。
幸运的是,这种技术得到了IE和所有其他当前浏览器的支持.所以完全可以通过JavaScfipt动态地设置表单元素的事件处理程序。
六、创建单选按钮
最好的总是留在最后。通过JavaScript动态地创建单选钮是很费劲的,因为IE中创建单选钮的方法与其他浏览器所用的方法大相径庭。
除了IE,当前所有其他浏览器都允许使用以下方法创建单选钮(这些方法应该能想得到):
var radioButton = document.createElement("input");
radioButton.setAttribute("type", "radlo");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");
这样就能在除IE以外的所有当前浏览器中创建单选选钮,而且能正常工作。在lE中,单选钮确实会显示出来.但是无法将其选中,因为点击单选钮行不按我们预想得那样使之选中。在IE中,创建单选钮的方法与其他浏览器所用的方法完全不同,而且根本不兼容。对于前面建立的单选钮,在IE中可以如下建立:
var radioButton = decument.createElement("<input type='radio'
name='radioButton' value='checked'>");
好在,IE中确实可以通过JavaScript动态地创建单选钮,只不过难些,而且与其他浏览器不兼容。
如何克服这个限制呢?答案很简单,这就是需要某种浏览器嗅探(browser-sniffing)机制,使得在创建单选钮时脚本就能知道该使用哪个方法。幸运的是,你不用检查大量不同的浏览器。假设只使用现代浏览器,脚本只需要在IE和其他浏览器间进行区分就行了。
IE能识别出名为uniqueID的document对象的专用属性,名为uniqueID。IE也是惟一能识别这个属性的浏览器,所以uniqueID很适合用来确定脚本是不是在IE中运行。
使用docurnent.uniqueID属性来确定脚本在哪个浏览器中运行时,可以结合IE特定的办法和标准兼容的方法,这就会得到以下代码:
if(document.uniqueID) {
//Internet Explorer
var radioButton = decument.createElement("<input type='radio'
name='radioButton' value='checked'>");
}
else {
//Standards Compliant
var radioButton = document.createElement("input");
radioButton.setAttribute("type", "radlo");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");
}

Javascript 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
js前端导出Excel的方法
Nov 01 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
教你一步步实现一个简易promise
Nov 02 Javascript
用于判断用户注册时,密码强度的JS代码
Jan 01 #Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 #Javascript
js继承 Base类的源码解析
Dec 30 #Javascript
动态创建的表格单元格中的事件实现代码
Dec 30 #Javascript
javascript FormatNumber函数实现方法
Dec 30 #Javascript
js 图片轮播(5张图片)
Dec 30 #Javascript
走出JavaScript初学困境—js初学
Dec 29 #Javascript
You might like
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
使用javascript做的一个随机点名程序
2014/02/13 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Python文件操作方法详解
2020/02/09 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
哈理工毕业生的求职信
2013/12/22 职场文书
企业军训感想
2014/02/07 职场文书
社会实践活动总结报告
2014/04/29 职场文书
电工实训报告总结
2014/11/05 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
远程教育学习心得体会
2016/01/23 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
python xlwt模块的使用解析
2021/04/13 Python
在pyCharm中下载第三方库的方法
2021/04/18 Python
vue ref如何获取子组件属性值
2022/03/31 Vue.js
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers