实现JavaScript跨浏览器

实现JavaScript跨浏览器

开发跨浏览器的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关键字来访问父窗口。