开发跨浏览器的JavaScript,并不是一件很容易的事,下面是一些经验总结。
一、动态向表中添加行
- 问题:IE中,不能将行增加到表table。
- 解决方法:将行增加到表体tbody。
- 示例:点击查看
二、动态设置元素style属性
- 问题:IE下支持object.style.cssText="style:value",Firefox下使用object.setAttribute("style", value)
- 解决方法:统一用object.style.属性=值。
- 示例:点击查看
三、动态设置元素的Class属性
- 问题:IE下使用object.setAttribute("className", value),Firefox下使用object.setAttribute("class", value)。
- 解决方法:统一用object.className=value。
- 示例:点击查看
四、动态创建Input元素
- 问题:IE中先添加元素,后设置的属性不起作用。
- 解决方法:先添加属性,再添加元素。
- 示例:点击查看
五、动态设置标签内容
- 问题:IE中用innerText属性,相反地,Firefox下用textContent属性。
- 解决方法:先判断浏览器类型,再分别设置,当然也可以同时设置。还有一种方法就是用innerHTML来替换。
- 示例:点击查看
六、增加和删除Option
- 问题:增加Option时,Firefox下不支持object.add方法。删除Option时,Firefox下不支持object.options .remove方法。
- 解决方法:增加Option时,使用object.options.add方法。删除Option时,使用object.remove方法。另外也可以用DOM的AppendChild和removeChild方法。
- 示例:点击查看
七、动态创建单选按钮
- 问题:IE不能用setAttribute方法添加name属性,相反地,Firefox下不能用createElement(htmlStr)来添加name属性。
- 解决方法:先判断浏览器类型,再分别设置。当然也可以同时设置。
- 示例:点击查看
八、document.formName.item("itemName")
- 问题:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"];Firefox下,只能使用document.formName.elements["elementName"]。
- 解决方法:统一使用document.formName.elements["elementName"]。
九、动态创建单选按钮
- 问题:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用 []获取集合类对象。
- 解决方法:统一使用[]获取集合类对象。
十、自定义属性
- 问题:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用 getAttribute() 获取自定义属性
- 解决方法:统一通过 getAttribute() 获取自定义属性。
十一、eval("idName")
- 问题:IE下,可以使用 eval("idName") 或 getElementById("idName") 来取得 id 为 idName 的HTML对象;Firefox下,只能使用 getElementById("idName") 来取得 id 为 idName 的HTML对象。
- 解决方法:统一用 getElementById("idName") 来取得 id 为 idName 的HTML对象。
十二、event.srcElement
- 问题:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。
- 解决方法:使用srcObj = event.srcElement ? event.srcElement : event.target;
十三、访问的父元素
- 问题:在IE下,使用obj.parentElement或obj.parentNode访问obj的父结点;在firefox下,使用obj.parentNode访问obj的父结点。
- 解决方法:因为firefox与IE都支持DOM,因此统一使用obj.parentNode 来访问obj的父结点。
十四、innerText
- 问题:innerText在IE中能正常工作,但是innerText在FireFox中却不行。
- 解决方法:在非IE浏览器中使用textContent代替innerText。
十五、模态和非模态窗口问题
- 问题:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能。
- 解决方法:直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话,使用var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。
十六、frame和iframe问题
- 问题:要访问frame对象,IE下使用window.frameId或者window.frameName来访问这个frame对象;Firefox下使用window.frameName来访问这个frame对象;
- 解决方法:统一使用 window.document.getElementById("frameId") 来访问这个frame对象。在IE和Firefox中都可以使用window.document.getElementById("frameId").src 或window.frameName.location来切换frame的内容;如果需要将frame中的参数传回父窗口,可以在frame中使用parent关键字来访问父窗口。