Javascript的IE和Firefox兼容性汇编

实践总结： 1、绑定事件    1）使用 IE5/Windows 的 attachEvent() 方法    早在 W3C DOM 工作组磨砺出标准的事件模型之前，attachEvent() 方法已经被实现了，并且可被用于 Windows 版的 IE5 或更新版本的浏览器上的每一个 HTML 元素。    attachEvent() 方法的用法如下所示：    elemObject.attachEvent("eventName", functionReference);    eventName 参数的值是表示事件名称的字符串，比如 onmousedown。functionReference 参数是一个不带括号的函数引用，和早些时候描述的事件属性方法中一样。因此对于上   面例子的按键对象，可以通过如下的脚本语句把函数绑定到按键的 click 事件：

   document.getElementById("button1").attachEvent("onclick", myFunc);

   2）使用 W3C DOM 的 addEventListener() 方法    addEventListener() 方法为指定的结点注册了一个事件，表示该结点希望处理相应的事件。这个方法的第一个参数是一个声明事件类型的字符串（不带"on"前缀），比如    click，mousedown，和 keypress。addEventListener() 方法的第二个参数可以和早些时候描述过的函数引用同样对待。第三个参数则是一个 Boolean 值，指明该结点是否以   DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说，第三个参数应该为 false（假）。    2、innerText与innerHTML    innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例： <a href="javascript:alert(document.getElementById(test).innerHTML.replace(/<.+?>/gim,))">无HTML,符合W3C标准</a> 3、event    IE4+ 的事件对象是 window 对象的一个属性；    而对于 NN4 和 W3C DOM 来说，事件对象看起来就更加抽象一些。除了基于标识属性风格的绑定方法之外，其它绑定方法都是把事件对象自动传递给与事件相绑定的函数。传递   给函数的是一个单一的参数。开发者需要在函数中定义一个参数变量，来“接收”该参数的值。为了避免和IE中的 window.event 对象互相冲突，请不要把参数命名为 event。    设想在处理事件时，我们需要在一个事件函数中考察一个或者多个事件属性。这是一个简单的技术，可以使事件处理函数和作为参数传入的事件对象协同工作，或者从   window.event 属性中读取信息。而且，这个技术不必处理不同的浏览器版本之间的细微差别。

   在开始的时候，需要在您的事件处理函数中定义一个参数变量，准备接收可能传入的事件对象。然后，通过简单的条件表达式把浏览器的事件对象赋值给上述的参数变量：

   function myFunc(evt) {     evt = (evt) ? evt : ((window.event) ? window.event : "")    // process event here    }    如果事件对象真的以参数的形式传进来了，则在函数内部，事件对象就被保留在 evt 这个局部变量中。如果这个参数是 null，而且浏览器的 window 对象包含有一个 event      属性，则 window.event 对象就会把自己赋值给 evt 变量。

   然而，为了完成这个工作，还应该再包含一层或者多层条件控制，以便优雅地适应那些在事件模型中没有定义事件对象的的早期浏览器：

   function myFunc(evt) {     evt = (evt) ? evt : ((window.event) ? window.event : "")     if (evt) {        // process event here     }    }    为了把同样的方式应用到所有事件处理函数的构建中，您可以定义一个函数来兼容两种事件，即由绑定的标识属性显式传入的事件对象，以及由绑定的事件属性隐式传入的事件    对象。这样即使您在开发过程中改变了事件绑定的风格，这个函数也不必改变。

   需要抽象的最重要的事件对象属性可能得算指向接收事件的 HTML 元素的引用。NN4 和 W3C 的事件对象采用相同的属性名（target），而 IE4+ 的事件对象则使用 srcElement    属性。这时候，对象检测技术（而不是费力劳神而又具有危险倾向的浏览器版本识别方法）再次拯救了我们。对于那些非文本容器的元素，一个简单的条件表达式就可以轻松处   理脚本语法上的差别：

    var elem = (evt.target) ? evt.target : evt.srcElement

4、一个事件处理函数的模板 function functionName(evt) {     evt = (evt) ? evt : ((window.event) ? window.event : "")     if (evt) {        var elem         if (evt.target) {             elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target         } else {            elem = evt.srcElement         }         if (elem) {             // process event here         }     } }

请 把第一行的函数名替换为您希望的函数名，并在注视指示的地方开始书写具体事件的代码。这个格式应该可以为您提供一个起点，适合于您采用的任何跨浏览器的事 件绑定风格。如果您需要在一个页面中多次使用这个格式，则可以进一步精简代码，即把读取目标的代码抽象成一个可重用的工具函数，然后在每一个事件处理函数 中进行调用：

// shared functionfunction getTargetElement(evt) {     var elem     if (evt.target) {         elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target     } else {         elem = evt.srcElement     }     return elem}function functionName(evt) {     evt = (evt) ? evt : ((window.event) ? window.event : "")     if (evt) {         var elem = getTargetElement(evt)         if (elem) {             // process event here        }     } } 有了这类框架，您现在应该可以把更多的注意力集中在各个事件处理函数要求的具体动作中了。

以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox

1. document.form.item 问题 (1)现有问题： 现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行 (2)解决方法： 改用 document.formName.elements["elementName"] (3)其它 参见 2

2. 集合类对象问题 (1)现有问题： 现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。 (2)解决方法： 改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。 又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1] (3)其它

3. window.event (1)现有问题： 使用 window.event 无法在 MF 上运行 (2)解决方法： MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通： 原代码(可在IE中运行)： <input type="button" name="someButton" value="提交" οnclick="java script:gotoSubmit()"/> ... <script language="javascript"> function gotoSubmit() { ... alert(window.event); // use window.event ... } </script>

新代码(可在IE和MF中运行)： <input type="button" name="someButton" value="提交" οnclick="java script:gotoSubmit(event)"/> ... <script language="javascript"> function gotoSubmit(evt) { evt = evt ? evt : (window.event ? window.event : null); ... alert(evt); // use evt ... } </script> 此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

4. HTML 对象的 id 作为对象名的问题 (1)现有问题 在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。 (2)解决方法 用 getElementById("idName") 代替 idName 作为对象变量使用。

5. 用idName字符串取得对象的问题 (1)现有问题 在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。 (2)解决方法 用 getElementById(idName) 代替 eval(idName)。

6. 变量名与某 HTML 对象 id 相同的问题 (1)现有问题 在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。 (2)解决方法 在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。 此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。 (3)其它 参见 问题4

7. event.x 与 event.y 问题 (1)现有问题 在IE 中，event 对象有 x, y 属性，MF中没有。 (2)解决方法 在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。 故采用 event.clientX 代替 event.x。在IE 中也有这个变量。 event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。

如果要完全一样，可以稍麻烦些： mX = event.x ? event.x : event.pageX; 然后用 mX 代替 event.x (3)其它 event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。

8. 关于frame (1)现有问题 在 IE中 可以用window.testFrame取得该frame，mf中不行 (2)解决方法 在frame的使用方面mf和ie的最主要的区别是： 如果在frame标签中书写了以下属性： <frame src="xx.htm" id="frameId" name="frameName" /> 那么ie可以通过id或者name访问这个frame对应的window对象 而mf只可以通过name来访问这个frame对应的window对象 例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问 ie： window.top.frameId或者window.top.frameName来访问这个window对象 mf： 只能这样window.top.frameName来访问这个window对象

另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签 并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容 也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容 关于frame和window的描述可以参见bbs的‘window与frame’文章 以及/test/js/test_frame/目录下面的测试 ----adun 2004.12.09修改

9. 在mf中，自己定义的属性必须getAttribute()取得 10.在mf中没有 parentElement parement.children 而用 parentNode parentNode.childNodes childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。 一般可以通过node.getElementsByTagName()来回避这个问题。 当html中节点缺失时，IE和MF对parentNode的解释不同，例如 <form> <table> <input/> </table> </form> MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点

MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

11.const 问题 (1)现有问题: 在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。 (2)解决方法: 不使用 const ，以 var 代替。

12. body 对象 MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

13. url encoding 在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx'; frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器 一般会服务器报错参数没有找到 当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为& 一般MF无法识别js中的&

14. nodeName 和 tagName 问题 (1)现有问题： 在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象 有问题（具体情况没有测试，但我的IE已经死了好几次）。 (2)解决方法： 使用 tagName，但应检测其是否为空。

15. 元素属性 IE下 input.type属性为只读，但是MF下可以修改

16. document.getElementsByName() 和 document.all[name] 的问题 (1)现有问题： 在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。

继续帖呵.这是ajax基础教程上面列出的.

1. 向表中追加行

这是IE和Firefox,Safari,Opera都支持的代码

var cell = documentcreateElement("td").appendChild(document.createTextNode("foo"));

var row = document.createElement("tr").appendChild(cell);

document.getElementById("MyTableBoyd").appendChild(row);

2. 通过JAVASCRIPT设置元素的样式

var spanElement = document.getElementById("myspan");

//spanElement.setAttribute("style","font-weight:bold;color:red"); //IE之外的浏览器

spanElement.style.cssText="font-weight:bold;color:red"; //IE的方法cssText不是标准属性,但得到IE支持

3. 设置元素的CLASS属性

element.setAttribute("class","stylename");//非IE

element.setAttribute("className","stylename");//IE

4. 创建输入元素(通用代码)

var button = document.createElement("input");

button.setAttribute("type","button");

document.getElementById("form").appendChild(button);

5. 向输入元素增加事件处理程序(通用代码)

var element = document.getElementById("ee");

element.οnclick=function(){todo();};

6. 创建单选按钮 var ration = document.createElement(" );//ie

//非ie创建方法 vat radion = document.createElement("input");

radion .setAttribute("type","radio");

radion.setAttribute("name","radionsss");

radion.setAttribute("value","checked");