Firefoxで開発されたJavaScriptがIEで失敗する典型的な理由は何ですか？
最近のFirefoxとSafariで正常に動作するJavaScript拡張ページをいくつか開発しました。 Internet Explorerでのチェックに失敗し、ページがIE 6および7（これまでのところ）で機能しないことがわかりました。スクリプトはなんらかの理由で実行されず、JavaScriptのように表示されますいくつかのjavascriptが実行されますが、そこにはありませんでした。dom操作で独自のライブラリを使用しています。YUI2から、YUI-LoaderとXML-Http-Requestを使用し、1つのページでJQueryに依存する「psupload」を使用しています。
OfficeからMicrosoft Script EditorをインストールしていますXPこれでデバッグします。特定のテストも今すぐ作成します。
IEの典型的な欠点は何ですか？目を開いたままにできる方向。
私はこのページを見つけました、それはいくつかの違いを示しています。訪問： Quirksmode
あなたの経験から、最初に探すべきいくつかの典型的なことを挙げていただけますか？
また、後で特定のタスクについてここでさらに質問しますが、今のところ、IE通常、Firefoxで正常に実行されるスクリプトで失敗する理由）の経験に興味があります。
編集：すばらしい回答をありがとう！
それまでの間、コード全体を調整してInternet Explorerでも動作するようにしました。私はjQueryを統合し、自分のクラスをその上に構築しました。これは私の最初の間違いでした。最初からすべてのものをjQueryで構築していませんでした。今私が持っています。
また、JSLintは非常に役立ちました。
そして、さまざまな答えからの単一の問題の多くが役立ちました。
コード内にこれらまたは類似のコンマがないかどうかも確認してください
var o={
'name1':'value1',
'name2':'value2',
}
最後のカンマ（value2に続く）はFirefoxでは許容されますが、IEでは許容されません
投稿にタグが付けられているときにjQueryまたはYUIを使用することに固執する場合は、ブラウザー間の違いが最小限である必要があります。それがフレームワークの目的であり、これらのブラウザー間の違いに対応します。
例として、 quirksmode DOM traversal page を見てください。これによると、IEはほとんどのことをサポートしていません... trueの場合、フレームワークは次のようになります。 IEは_elem.childElementCount_をサポートしていませんが、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
たくさんのことはありますが、私が陥りがちだった1つのトラップは、多くのブラウザーが引用符で囲まれた名前なしでJSONを受け入れるのに対し、ie6とie7は受け入れないということです。
{ name: "Jakob" } // will often work, but not in ie6/ie7
{ "name": "Jakob" } // Better!
編集：明確にするために、これはオブジェクトリテラルではなく、実際のJSONが必要な場合のみの問題です。 JSONはオブジェクトリテラル構文のサブセットであり、データ交換形式（XMLなど）として意図されているため、より厳密に設計されています。
JavaScriptサポートの違い
IEは1.5以降、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は主にIE6からCSSを進めることに集中することを選択しました。 IE8のDOMサポートは、2001年にリリースされたIE6の場合もある可能性があります。したがって、IEのDOMサポートは、最新のブラウザーよりも10年近く遅れています。レイアウトエンジンに特有のJavaScriptの相違がある場合は、 「最善の策は、CSSの問題に対処したのと同じ方法で攻撃することです。そのブラウザーをターゲットにします。BROWSEを使用しないでくださいRスニッフィング、機能検出を使用して、ブラウザー/そのレベルのDOMサポートをスニッフィングします。
JScriptは、IE独自のECMAScriptの実装ではありません。 JScriptは、NetscapeのJavaScriptに対するIEの答えでした。どちらもECMAScriptの前に登場しました。
Script要素のtype属性に関する限り、type = "text/javascript"がデフォルトの標準（少なくともHTML5では標準）であるため、スクリプトがJavaScriptでない限り、type属性は必要ありません。
IE not innerHTML ... innerHTMLがサポートされていない限り、innerHTMLはIEによって発明され、現在もDOM標準ではありません。他のブラウザが便利であるため、これを採用しています。 、これがクロスブラウザを使用できる理由です。動的に変化するテーブルに関する限り、MSDNは「テーブルに必要な特定の構造のため、 innerText および innerHTML プロパティがあるため、 tableオブジェクトとtrオブジェクトは読み取り専用です。 "最初はどれだけ本当だったかはわかりませんが、最近のブラウザは、テーブルレイアウトの複雑さを処理している間にそれを明らかにしました。
JavaScriptでPPKを読むことを強くお勧めしますJeremy KeithのDOM ScriptingDouglas CrockfordのJavaScript：Good PartsおよびChristian Hellman'sBeginning JavaScript with DOM Scripting and Ajax JavaScriptをよく理解するために。
フレームワーク/ライブラリに関する限り、JavaScriptをまだ十分に理解していない場合は、回避する必要があります。 2年前、私はjQueryトラップに陥り、すばらしい偉業を成し遂げることができましたが、JavaScriptを適切にコーディングすることについて、いまいましいことを学んだことはありません。後から見ると、jQueryは邪悪な素晴らしいDOMツールキットですが、適切なクロージャーやプロトタイプの継承などを学ぶことができなかったため、個人的な知識が戻っただけでなく、私が行っていた手掛かりがなかったため、私の仕事は莫大なパフォーマンスに影響し始めました。
JavaScriptはブラウザの言語です。クライアントサイド/フロントエンドエンジニアの場合、JavaScriptをコマンドすることが最も重要です。 Node.jsはJavaScriptを完全にチルトさせています。私はその開発において日々大きな進歩を遂げているようです。サーバーサイドJavaScriptは、近い将来標準になるでしょう。これについては、JavaScriptの重要性と現在の重要性をさらに強調するために言及しています。
JavaScriptはRailsよりも多くの波を作るでしょう。
ハッピースクリプト！
先日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);
それは理解するのが楽しいものでした！
一部のネイティブオブジェクトは、実際にはそうではないように見えますが、読み取り専用です（書き込みは可能ですが、効果はありません）。たとえば、一般的な高度なJavaScriptは、システムメソッドをオーバーライドすることによってElementオブジェクトを拡張することに基づいています。たとえば、Element.prototype.appendChild（）を変更して、子ノードを追加するだけではなく、親のデータで初期化します。これはIE6で警告なしに失敗します-新しいオブジェクトではなく新しいオブジェクトで元のメソッドが呼び出されます。
一部のブラウザー（今は覚えていません）では、HTMLタグ間の改行をテキストノードと見なしていますが、他のブラウザーはそうではありません。したがって、childNodes（n）、nextSibling（）、firstChild（）などの動作は大きく異なります。
今朝見つけたばかりです。同僚がスクリプトタグを次のように設定しました：<script type="application/javascript">彼のideオートコンプリートが「text/javascript」の前に持っていたため
しかし、IEは、「application/javascript」を使用する場合、スクリプト全体を無視するだけであり、「text/javascript」を使用する必要があることがわかります。
配列の最後のコンマとオブジェクトリテラルが問題であったため、最近チェックされていません（IE8を意味します）。
var a = [ 1, 2, 3, ];
var o = { a:1, b:2, c:3, };
これにより、そのような構造をサーバー側で生成するときに余分なコードが発生します。
それだけの価値があるので、私は<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（）をスローする必要がありました。
余分なコンマと欠落したコンマは、FFでスムーズに機能する一方で、IEでは通常の問題でした。
IEは ";"がないことについて非常に厳密です。通常そうです。
私はあまり馴染みのないjQueryについて言及しましたが、一般的な参照として、特にプロトタイプについては、IEの予約語/メソッド名に注意する必要があります。私がよく利用されるのは次のようなものです。
someElement.appendChild(new Element('label',{ **for**: someInput.id }).update( someLabelText );
（新しいElement（tagName、propertyHash）は、Protitypeで新しい要素が作成される方法です）。 IEでは、forは予約語であるため、_for:_は_'for':_でなければなりません。これは完全に理にかなっています-しかし、FireFoxはこれを許容します。
もう一つの例：
someElement.wrap('div').addClassName('someClass')
（Prototypeのwrapメソッドは、1つの要素を別の要素にラップします）-IEでは、textareasで、wrapはプロパティであり、メソッド化の代わりにElement.wrap()を使用する必要がありますバージョン
これらは私の経験から思い浮かぶ2つの例です。それらはプロトタイプに基づいていますが、コアの問題はそうではありません：IEは予約語を考慮しますが、FireFoxまたはSafariが許容するメソッド/ラベル/識別子に注意してください。
実際のところ、IEはJavaScriptをサポートしていません... ECMAScriptの独自の実装をサポートしています：JScript ...
Firefoxのエラーコンソールにエラーを出力するためにconsole.log()を使用すると、IEでスクリプトが失敗します。 IEでテストするときは、これらを取り出すことを忘れないでください。
IEは最新のブラウザではなく、ECMAScriptに緩く従います。