在Firefox上开发的Javascript在IE上失败的典型原因是什么？[关闭]

我开发了一些javascript增强的页面，这些页面可以在最近的Firefox和Safari上正常运行。我错过了检入Internet Explorer的权限，现在发现页面无法在IE 6和7上运行（到目前为止）。尽管执行了某些javascript，但脚本仍未执行，页面显示好像没有javascript。我使用自己的带有dom操作的库，从YUI 2开始，我使用YUI-Loader和XML-Http-Request，并且在一页上使用“ psupload”，这取决于JQuery。

我正在从Office XP安装Microsoft脚本编辑器，现在将进行调试。我现在还将编写特定的测试。

IE的典型失败点是什么？我可以向哪个方向睁开眼睛。

我找到了此页面，该页面显示了一些差异。参观：Quirksmode

您能否从您的经验中列举一些我首先要寻找的典型事物？

稍后，我还将在此处针对特定任务询问更多问题，但现在我对您的经验感兴趣，为什么IE通常无法在Firefox上正常运行的脚本上失败

编辑：谢谢所有那些伟大的答案！

同时，我调整了整个代码，以便它也可以与Internet Explorer一起使用。我集成了jQuery，并在此基础上构建了自己的类。这是我的基本错误，从一开始我就没有在jQuery上构建所有东西。我现在有。

JSLint也帮了我很多忙。

来自不同答案的许多单个问题也有所帮助。

如果发现任何错误/遗漏等，请随时更新此列表。

注意： IE9修复了以下许多问题，因此很多问题仅适用于IE8及以下版本，并且在一定程度上适用于quirks模式的IE9。例如，IE9支持SVG， <canvas>，<audio>和<video>原生，但是你必须让符合标准的模式为他们提供。

一般：

• 部分加载的文档存在的问题：在window.onloadIE或部分事件中添加JavaScript是一个好主意，因为IE在部分加载的文档中不支持许多操作。

• 不同的属性：在CSS中，它是elm.style.styleFloat在IE中，而elm.style.cssFloat在Firefox中。在<label>标记中，该for属性是通过elm.htmlForIE和elm.forFirefox 来访问的。请注意，这for是IE中保留的，因此elm['for']阻止IE引发异常可能是一个更好的主意。

基本JavaScript语言：

• 'string'[0]IE中不支持访问字符串中的字符：，因为原始JavaScript规范中不支持。使用'string'.charAt(0)或'string'.split('')[0]注意访问数组中的项比使用charAtIE中的字符串要快得多（尽管split第一次调用时会有一些初始开销。）

• 对象末尾的逗号：例如{'foo': 'bar',}IE中不允许使用。

特定于元素的问题：

• 获取documentIFrame：

  • Firefox和IE8 + ：（ IFrame.contentDocument IE 从版本8开始支持此功能。）
  • IE浏览器： IFrame.contentWindow.document
  • （在两个浏览器中均IFrame.contentWindow指window。）

• 画布： IE9之前的IE版本不支持该<canvas>元素。IE确实支持VML，这是一项类似的技术，explorercanvas可以<canvas>为许多操作的元素提供就地包装。请注意，与使用VML时在怪异模式下相比，处于标准遵从性模式下的IE8慢很多倍，并且故障更多。

• SVG： IE9原生支持SVG。IE6-8可以支持SVG，但只能与外部插件一起使用，其中只有一些插件支持JavaScript操作。

• <audio>和<video>：仅在IE9中受支持。

• 动态创建单选按钮： IE <8有一个错误，使创建的单选按钮document.createElement无法检查。另请参见如何在Javascript中动态创建可在所有浏览器中使用的单选按钮？解决这个问题的方法。

• <a href>标记中的嵌入式JavaScript 和onbeforeunloadIE中的冲突：如果标记的href一部分中包含嵌入式JavaScript a（例如<a href="javascript: doStuff()">，onbeforeunload除非onbeforeunload预先删除处理程序，否则IE始终显示返回的消息。另请参见在关闭标签时进行确认。

• <script>标记事件差异： onsuccess并且onerrorIE中不支持，并且被特定于IE的IE取代onreadystatechange，无论下载是成功还是失败，都会触发该特定于IE的事件。有关更多信息，请参见JavaScript Madness。

元素大小/位置/滚动和鼠标位置：

• 获取元素的大小/位置：元素的宽度/高度有时elm.style.pixelHeight/Width在IE中而不是elm.offsetHeight/Width，但在IE中都不可靠，尤其是在怪癖模式下，有时一个给出的结果要好于另一个。

  elm.offsetTop并且elm.offsetLeft经常被错误地报告，导致发现元素的位置不正确，这就是为什么在很多情况下弹出元素等都偏离几个像素的原因。

  还要注意，如果一个元素（或元素的父元素）具有display，none则IE在访问大小/位置属性时会引发异常，而不是0像Firefox那样返回。

• 获取屏幕尺寸（获取屏幕的可视区域）：

  • Firefox： window.innerWidth/innerHeight
  • IE标准模式： document.documentElement.clientWidth/clientHeight
  • IE怪癖模式： document.body.clientWidth/clientHeight

• 文档滚动位置/鼠标位置：实际上，这不是w3c定义的，因此即使在Firefox中也不是标准的。要查找scrollLeft/ scrollTop的document：

  • Firefox和IE在怪癖模式下： document.body.scrollLeft/scrollTop
  • IE在标准模式下： document.documentElement.scrollLeft/scrollTop

  • 注意：其他一些浏览器也使用pageXOffset/ pageYOffset。

    function getDocScrollPos() {
     var x = document.body.scrollLeft ||
             document.documentElement.scrollLeft ||
             window.pageXOffset || 0,
         y = document.body.scrollTop ||
             document.documentElement.scrollTop ||
             window.pageYOffset || 0;
     return [x, y];
    };

  为了获得鼠标光标的位置，evt.clientX并且evt.clientY在mousemove事件中将给出相对于文档的位置而无需添加滚动位置，因此需要合并先前的功能：

  var mousepos = [0, 0];
  document.onmousemove = function(evt) {
   evt = evt || window.event;
   if (typeof evt.pageX != 'undefined') {
    // Firefox support
    mousepos = [evt.pageX, evt.pageY];
   } else {
    // IE support
    var scrollpos = getDocScrollPos();
    mousepos = [evt.clientX+scrollpos[0], evt.clientY+scrollpos[1]];
   };
  };

选择/范围：

• <textarea>和<input>选择：selectionStart，selectionEnd并且未在IE中实现，并且有一个专有的“范围”系统来代替它，另请参见textarea中脱字符的位置，从一开始就是字符。

• 获取文档中当前选定的文本：

  • Firefox： window.getSelection().toString()
  • IE浏览器： document.selection.createRange().text

通过ID获取元素：

• document.getElementById也可以参照name属性在形式（取决于其在文档中的第一定义），所以它最好不要有具有相同不同的元素name和id。这可以追溯到id不是w3c标准的日子。document.all（专有IE特有的属性）是显著的速度比document.getElementById，但它有其他的问题，因为它总是优先name之前id。我个人使用此代码，只是为了确保进行以下附加检查：

  function getById(id) {
   var e;
   if (document.all) {
    e = document.all[id];
    if (e && e.tagName && e.id === id) {
     return e;
    };
   };
   e = document.getElementById(id);
   if (e && e.id === id) {
    return e;
   } else if (!e) {
    return null;
   } else {
    throw 'Element found by "name" instead of "id": ' + id;
   };
  };

只读innerHTML的问题：

• IE浏览器不支持的设置的innerHTML col，colGroup，frameSet，html，head，style，table，tBody，tFoot，tHead，title，和tr元件。这是一个针对表相关元素的函数：

  function setHTML(elm, html) {
   // Try innerHTML first
   try {
    elm.innerHTML = html;
   } catch (exc) {
    function getElm(html) {
     // Create a new element and return the first child
     var e = document.createElement('div');
     e.innerHTML = html;
     return e.firstChild;
    };
    function replace(elms) {
     // Remove the old elements from 'elm'
     while (elm.children.length) {
      elm.removeChild(elm.firstChild);
     }
     // Add the new elements from 'elms' to 'elm'
     for (var x=0; x<elms.children.length; x++) {
      elm.appendChild(elms.children[x]);
     };
    };
    // IE 6-8 don't support setting innerHTML for
    // TABLE, TBODY, TFOOT, THEAD, and TR directly
    var tn = elm.tagName.toLowerCase();
    if (tn === 'table') {
     replace(getElm('<table>' + html + '</table>'));
    } else if (['tbody', 'tfoot', 'thead'].indexOf(tn) != -1) {
     replace(getElm('<table><tbody>' + html + '</tbody></table>').firstChild);
    } else if (tn === 'tr') {
     replace(getElm('<table><tbody><tr>' + html + '</tr></tbody></table>').firstChild.firstChild);
    } else {
     throw exc;
    };
   };
  };

  还要注意的是IE需要添加一个<tbody>到一个<table>附加之前<tr>s到该<tbody>创建使用时元件document.createElement，例如：

  var table = document.createElement('table');
  var tbody = document.createElement('tbody');
  var tr = document.createElement('tr');
  var td = document.createElement('td');
  table.appendChild(tbody);
  tbody.appendChild(tr);
  tr.appendChild(td);
  // and so on

事件差异：

• 获取event变量： DOM事件不会传递给IE中的函数，并且可以通过访问window.event。获取事件的一种常见方法是使用例如
  elm.onmouseover = function(evt) {evt = evt||window.event}
  默认值为window.eventif evt的未定义。

• 关键事件代码的差异：关键事件代码的差异很大，尽管如果您查看Quirksmode或JavaScript Madness，它几乎不特定于IE，Safari和Opera再次有所不同。

• 鼠标事件的区别：button IE中的属性是一个位标志，它允许一次使用多个鼠标按钮：

  • 左： 1（var isLeft = evt.button & 1）
  • 右： 2（var isRight = evt.button & 2）

  • 中心： 4（var isCenter = evt.button & 4）

    W3C模型（由Firefox支持）不如IE模型灵活，一次只允许一个按钮，左为0，右为2，中心为1。请注意，正如Peter-Paul Koch所提到的，这是非常违反直觉的，0通常表示“无按钮”。

    offsetX并且offsetY存在问题，最好避免在IE中使用它们。在IE中获取offsetXand的更可靠方法是获取相对定位的元素的位置，然后从and中减去它。offsetYclientXclientY

    还要注意，在IE中，要双击某个click事件，您需要同时将a click和dblclickevent 注册到一个函数中。Firefox click以及dblclick双击时都会触发，因此需要IE特定的检测才能具有相同的行为。

• 在事件处理的不同模式：无论是专有的IE模型和事件从下往上火狐模型的支持处理，例如，如果有在这两个元素的事件<div><span></span></div>，然后将事件的触发span ，然后将div，而不是它们是秩序如果使用了传统的，例如elm.onclick = function(evt) {}。

  通常仅在Firefox等中支持“捕获”事件，这将按自上而下的顺序触发divthen span事件。IE具有elm.setCapture()并elm.releaseCapture()用于elm在处理其他事件之前将鼠标事件从文档重定向到元素（在这种情况下），但是IE具有许多性能和其他问题，因此应避免使用。

  • Firefox：

    附：elm.addEventListener(type, listener, useCapture [true/false])
    拆离：elm.removeEventListener(type, listener, useCapture)
    （type是例如'mouseover'无on）

  • IE：只能在IE中添加元素上给定类型的单个事件-如果添加了多个相同类型的事件，则会引发异常。还要注意，事件函数中的this指的是指window元素而不是绑定元素（因此用处不大）：

    附：elm.attachEvent(sEvent, fpNotify)
    拆离：elm.detachEvent(sEvent, fpNotify)
    （sEvent例如是'onmouseover'）

• 事件属性差异：

  • 阻止事件被任何其他侦听功能处理：

    Firefox： evt.stopPropagation()
    IE： evt.cancelBubble = true

  • 停止例如按键事件插入字符或停止复选框被选中：

    火狐浏览器： evt.preventDefault()
    IE： evt.returnValue = false
    注：刚回来false的keydown，keypress，mousedown，mouseup，click和reset也将避免违约。

  • 获取触发事件的元素：

    Firefox： evt.target
    IE： evt.srcElement

  • 获取鼠标光标离开的元素： 如果发生事件，则evt.fromElement在IE中为evt.targetFirefox onmouseout；否则为Firefoxevt.relatedTarget

  • 如果发生事件，则将鼠标光标移动到的元素获取：evt.toElement IE evt.relatedTarget中的Firefox中onmouseout，否则evt.target

  • 注意：（ evt.currentTarget事件绑定到的元素）在IE中没有等效项。

如果您的代码中有逗号，也请检查这些逗号或类似字符

var o={
'name1':'value1',
'name2':'value2',
} 

Firefox允许使用最后一个逗号（跟随value2），但IE不允许

如果您坚持使用jQuery或YUI作为帖子的标记，则浏览器之间的差异应该很小……这就是框架的目的，以便为您解决这些跨浏览器的差异。

举例来说，请看一下quirksmode DOM遍历页面，据此IE不支持大多数功能...虽然如此，但框架确实支持elem.childElementCount，例如IE不支持，但是在jQuery中：$(elem).children().size()可以获取此值，在每个浏览器中。您会发现库中有一些东西可以处理99％的跨浏览器不支持的情况，至少使用脚本...使用CSS可能需要将其移至该库的插件，一个常见的例子是四舍五入在IE中工作...因为它对此没有CSS支持。

但是，如果您直接开始执行操作（例如）document.XXX(thing)，则说明您不在库中，而是直接在执行javascript（全是javascript，但是您明白了这一点：），这可能会或可能不会导致问题，具体取决于如何在实施该特定功能时，IE团队曾喝醉。

与IE浏览器你就更有可能失败的造型现身权不是原始的JavaScript问题，动画几个像素关闭，诸如此类的事情，多在IE6更所以当然。

getElementbyID也将与IE中的name属性匹配，但不会与其他浏览器匹配，并且IE将选择最先找到的那个。

例：

<script>
 var foo = document.getElementById('bar');
</script>

....
<input name="bar" type="text" />  //IE will get this element
<span id="bar"> Hello, World! </span>  //FF,Safari,Chrome will get this element

有很多东西，但是我曾经遇到的一个陷阱是，许多浏览器接受不带引号的JSON，而ie6和ie7则不接受。

{ name: "Jakob" } // will often work, but not in ie6/ie7
{ "name": "Jakob" } // Better!

编辑：澄清一下，这只是当需要实际JSON而不是对象文字时的问题。JSON是对象文字语法的一个子集，它是一种数据交换格式（例如XML），这就是为什么它设计得更加挑剔。

不同的JavaScript支持

从1.5开始，IE不支持（大多数）扩展到JavaScript的扩展。

1.6的新功能

• 阵列方法- ，indexOf()，lastIndexOf()，every()，filter()，，forEach()map()some()
• for each ... in -迭代值而不是属性名称。

1.7的新功能

• 销毁工作- [a,b] = [1,2]
• 迭代器和生成器
• let 和 yeild

1.8的新功能

• 数组方法- reduce()，reduceRight()
• 定义功能的快捷方式。

其中一些要求您指定要在其下运行的JavaScript的版本号（在IE中会中断），但有些事情[1,2,3].indexOf(2)似乎并不那么重要，除非您尝试在IE中运行它

IE中的JavaScript与现代浏览器（例如Firefox）中的JavaScript之间的主要差异可以归因于CSS /（X）HTML跨浏览器差异的相同原因。过去，没有实际的标准。IE / Netscape / Opera进行了一场争夺地盘的战争，实现了大多数规范，但同时也省略了一些规范，并制定了专有规范以获取彼此的优势。我可以继续讲下去，但让我们跳到IE8的发布：多年来一直避免/嘲笑JavaScript，并且随着FF的兴起和对Webcomm的蔑视，IE选择将精力主要集中在推进CSS从IE6上。基本上没有DOM支持。IE8的DOM支持也可能是IE6，它于2001年推出。..因此IE的DOM支持比现代浏览器落后了近十年。如果您在布局引擎中存在JavaScript差异，那么最好的方法是像对待CSS问题一样来进行攻击。定位到该浏览器。不要使用浏览器嗅探，使用功能检测来嗅探您的浏览器/它对DOM的支持程度。

JScript不是IE自己的ECMAScript实现；JScript是IE对Netscape JavaScript的回答，两者均早于ECMAScript出现。

就脚本元素上的类型属性而言，type =“ text / javascript”是默认标准（至少在HTML5中如此），因此除非脚本不是JavaScript，否则您永远不需要类型属性。

至于IE不支持innerHTML ... innerHTML是IE发明的，如今仍不是DOM标准。其他浏览器也采用了它，因为它很有用，这就是为什么您可以跨浏览器使用它。对于动态更改表，MSDN说：“由于表需要特定的结构，因此表和tr对象的innerText和innerHTML属性是只读的。” 我不知道最初多少是正确的，但是很明显，现代浏览器在处理表布局的复杂性时已经弄清楚了。

我强烈建议阅读JavaScript上的PPK 杰里米·基思（Jeremy Keith）的DOM脚本 道格拉斯·克罗克福德（Douglas Crockford）的JavaScript：The Good Parts 和克里斯蒂安·海尔曼（Christian Hellman）的《使用DOM脚本和Ajax的Beginning JavaScript》，以更好地掌握JavaScript。

就Frameworks / Libraries而言，如果您还不太了解JavaScript，则应避免使用它们。2年前，我陷入了jQuery陷阱，尽管能够实现宏伟的壮举，但我从未学过关于正确编码JavaScript的东西。事后看来，jQuery是一个非常棒的DOM工具包，但是我未能学习适当的闭包，原型继承等，不仅使我的个人知识退缩，而且由于我不知道自己在做什么，我的工作开始受到巨大的性能影响。

JavaScript是浏览器的语言；如果您是客户端/前端工程师，那么命令JavaScript至关重要。Node.js带来了JavaScript的全面发展，我看到它的开发每天都在飞速发展。服务器端JavaScript将在不久的将来成为标准。我提到这一点是为了进一步强调JavaScript现在和将来的重要性。

JavaScript将比Rails引起更多的轰动。

祝脚本编写愉快！

某些本机对象是只读的，但看起来并不是真的（可以写入它们，但没有效果）。例如，常见的高级javascript基于Element通过覆盖系统方法来扩展对象的方法，例如，将Element.prototype.appendChild（）更改为比添加子节点做更多的事情-例如，使用父节点的数据对其进行初始化。这将在IE6上无提示地失败-原始方法将在新对象而不是新对象上调用。

有些浏览器（我现在不记得是哪个浏览器）认为HTML标记之间的换行符是文本节点，而其他浏览器则不这样。因此childNodes（n），nextSibling（），firstChild（）等的行为将有很大不同。

数组和对象文字中的尾随逗号过去一直是一个问题，最近尚未检查（表示IE8）：

var a = [ 1, 2, 3, ];
var o = { a:1, b:2, c:3, };

生成此类结构的服务器端时，这将导致一些额外的代码。

我今天早上刚发现一个同事，将脚本标签设置为： <script type="application/javascript">因为他的ide自动完成功能在“ text / javascript”之前

但是，事实证明，如果您使用“ application / javascript”，则IE只会忽略整个脚本，而您需要使用“ text / javascript”

前几天，我在Internet Explorer中发现了一个奇怪的怪癖。我正在使用YUI，并通过设置innerHTML来替换表主体（）的内容

Y.one('#elementId').set('innerHTML', '<tr><td>Column 1</td></tr>');

这将适用于除IE之外的所有浏览器。我终于发现，您无法替换IE中表的innerHTML。我必须使用YUI创建一个节点，然后附加该节点。

var myNode = Y.node.create('<tr><td>Column 1</td></tr>');
Y.one('#elementId').append(myNode);

这是一个有趣的发现！

在IE上正常运行时，多余的逗号和丢失的逗号曾经是IE上的常见问题。

IE对丢失“;”非常严格 通常是这样。

对于它的价值，我刚刚在<IE9中遇到了这个令人讨厌的问题

说你有这样的HTML：

<table><tr><td>some content...</td></tr></table>

出于某种原因（我有一个很好的理由），您需要在最后一个关闭TR之前检索表中的所有HTML，您可以尝试执行以下操作：

var tableHtml = document.getElementById('thetable').innerHTML;
var fragment = tableHtml.substring(0, tableHtml.lastIndexOf('</tr>'));

<IE9在这里将不返回任何内容（-1），因为tableHtml变量包含所有大写的html标记，并且lastIndexOf区分大小写。为了解决这个问题，我不得不在lastIndexOf之前放入toLowerCase（）。

IE不是现代的浏览器，仅宽松地遵循ECMAScript。

您提到了我不太熟悉但仅作一般参考的jQuery，特别是对于Prototype，需要注意的一件事是IE中的保留字/方法名称。我知道经常让我着迷的是：

someElement.appendChild(new Element('label',{ **for**: someInput.id }).update( someLabelText );

（new Element（tagName，propertyHash）是在Protitype中创建新元素的方式）。在IE中，for:必须为'for':，因为for是保留字。完全有道理-但是FireFox会容忍这一点。

另一个例子：

someElement.wrap('div').addClassName('someClass')

（wrapPrototype中的方法将一个元素包装到另一个元素中）-在IE中，在textareas上，wrap是一个属性，Element.wrap()必须使用它来代替方法版本

根据我的经验，这是两个例子。它们基于原型，但核心问题不是：注意IE认为保留字但FireFox或Safari可以容忍的任何方法/标签/标识符。

事实是IE不支持JavaScript ...它支持自己的ECMAScript实现：JScript ...有点不同...

使用console.log()输出误差Firefox的错误控制台会导致你的脚本在IE中失败。当您在IE中进行测试时，一定要记住将其删除。