实现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关键字来访问父窗口。

posted on 2010-08-11 08:28 飞熊 阅读(353) 评论(0)  编辑  收藏 所属分类: javaScript


只有注册用户登录后才能发表评论。


网站导航:
 
<2010年8月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
2930311234

导航

统计

常用链接

留言簿(1)

随笔分类

随笔档案

文章分类

文章档案

收藏夹

搜索

最新评论

阅读排行榜

评论排行榜