实现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的父结点。

十四、模态和非模态窗口问题

  • 问题: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关键字来访问父窗口。

发表评论