JavaScriptの互換性は、Web開発者にとって長い間大きな問題でした。正式な仕様、事実基準、さまざまな実装の違いにより、多くの開発者が昼夜を問わず苦しんでいます。この目的のために、IEとFirefoxのJavaScriptの互換性は、主に次の違いから要約されています。
コードコピーは次のとおりです。
1。関数とメソッドの違い。
2。スタイルアクセスと設定。
3。DOMメソッドおよびオブジェクト参照。
4。イベント処理。
5。他の違いに対する互換性治療。
1。関数とメソッドの違い
1。GetYear（）メソッド
[分析手順]次のコードを見てみましょう。
コードコピーは次のとおりです。
var year = new date（）。getYear（）;
document.write（year）;
IEで入手できる日付は「2010」であり、Firefoxで表示される日付は「110」です。これは、主にFirefoxでGetyearが「現在の1900年」の値を返しているためです。
compatibity互換性処理
コードコピーは次のとおりです。
var year = new date（）。getYear（）;
年=（年<1900？（1900+年）：年）;
document.write（year）;
GetPlyear getUtceflyearを通じてそれを呼び出すこともできます：
コードコピーは次のとおりです。
var year = new date（）。getFullyear（）;
document.write（year）;
2。eval（）関数
[分析ノート] IEでは、eval（ "idname"）またはgetElementById（ "idname"）を使用して、idnameでHTMLオブジェクトを取得できます。 Firefoxでは、getElementByID（ "IDNAME"）のみを使用して、IDNAMEでHTMLオブジェクトを取得できます。
[互換性処理] getElementByID（ "idname"）を使用して、idnameをwith idnameでHTMLオブジェクトを取得します。
3。constステートメント
[分析ノート] constキーワードはIEでは使用できません。のように：
コードコピーは次のとおりです。
const constvar = 32;
IEでは、これは構文エラーです。
compatible互換処理const constを使用しないで、代わりにvarを使用します。
4。var
[分析手順]次のコードをご覧ください。
コードコピーは次のとおりです。
echo = function（str）{
document.write（str）;
}
この関数はIEで正常に実行されますが、Firefoxでエラーが報告されました。
[互換性のある処理]エコーの前にvarを追加するのは正常であり、これがvarの言及の目的です。
5。ConstIssue
[分析ノート] constキーワードはIEでは使用できません。たとえば、const constvar = 32; IEでは、これは構文エラーです。
【ソリューションconstを使用しないで、代わりにvarを使用します。
2。スタイルアクセスと設定
1。CSSの「フロート」属性
[分析ノート]特定のCSS値にアクセスするJavaScriptの最も基本的な構文は次のとおりです。Object.style.Propertyですが、一部のCSSプロパティは、「Float」、「for」、「class」など、JavaScriptの予約済みの単語名と同じです。
IEで、これを書いてください：
コードコピーは次のとおりです。
document.getElementById（ "header"）。style.stylefloat= "left";
Firefoxで、これを書いてください：
コードコピーは次のとおりです。
document.getElementById（ "header"）。style.cssfloat= "left";
[互換性処理]書く前に判断を追加して、ブラウザがIEであるかどうかを判断する：
コードコピーは次のとおりです。
if（document.all）{//
document.getElementById（ "header"）。style.stylefloat= "left";
}
else {// IEではない場合は定義されていません
document.getElementById（ "header"）。style.cssfloat= "left";
}
2. <label>タグに「for」にアクセスします
[分析ノート]「フロート」属性のように、<label>タグの「for」にアクセスするために、目に見えない構文の区別を使用する必要があります。
IEで、これを書いてください：
コードコピーは次のとおりです。
var myobject = document.getElementById（ "mylabel"）;
var myattribute = myobject.getattribute（ "htmlfor"）;
Firefoxで、これを書いてください：
コードコピーは次のとおりです。
var myobject = document.getElementById（ "mylabel"）;
var myattribute = myobject.getattribute（ "for"）;
[互換性処理]ソリューションは、最初にブラウザタイプを決定することです。
3。クラスのプロパティにアクセスして設定します
[分析ノート]また、クラスはJavaScriptの予約単語であるため、これら2つのブラウザは異なるJavaScriptメソッドを使用してこのプロパティを取得します。
IE8.0の前にすべてのIEバージョンを書く方法：
コードコピーは次のとおりです。
var myobject = document.getElementById（ "header"）;
var myattribute = myobject.getattribute（ "className"）;
IE8.0およびFirefoxのライティングに適用：
コードコピーは次のとおりです。
var myobject = document.getElementById（ "header"）;
var myattribute = myobject.getattribute（ "class"）;
さらに、setAttribute（）を使用してクラス属性を設定する場合、2つのブラウザも同じ違いを持っています。
コードコピーは次のとおりです。
setAttribute（ "className"、value）;
この書き込み方法は、IE8.0の前にすべてのIEバージョンに適用できます。注：IE8.0は「クラス名」属性をサポートしていません。
setAttribute（ "class"、value）; IE8.0およびFirefoxに適しています。
compatible互換処理】
方法1、両方を書き込みます。
コードコピーは次のとおりです。
var myobject = document.getElementById（ "header"）;
myobject.setattribute（ "class"、 "classvalue"）;
myobject.setattribute（ "className"、 "classValue"）;
//ヘッダークラスをClassValueに設定します
方法2：IEおよびFFサポートobject.classNameを使用するので、次のように書くことができます。
コードコピーは次のとおりです。
var myobject = document.getElementById（ "header"）;
myobject.classname = "classvalue"; //ヘッダークラスをClassValueに設定します
方法3：最初にブラウザのタイプを判断し、次にブラウザタイプに従って対応するライティング方法を使用します。
4。オブジェクトの幅と高さの割り当ての問題
[分析ノート] obj.style.height = imgobj.height in firefoxに類似したステートメントは無効です。
compatible処理obj.style.height = imgobj.height + 'px'を使用します。
5.スタイルを追加します
[分析ノート] IEでは、addRule（）メソッドを使用して、styleSheet.addrule（ "p"、 "color：#ccc"、styleSheet.length）などのスタイルを追加します。ただし、この方法はFFと互換性がなく、Insetrule（）メソッドを使用してFFに置き換えます。 StyleSheet.InserTrule（ "p {color：#ccc}"、styleSheet.length）
compatible互換処理】
コードコピーは次のとおりです。
if（styleSheet.insertrule）{
// insertrule（）メソッド
}それ以外{
// addrule（）メソッド
}
6。最終スタイル
[分析ノート]クラスセレクターによって定義されたスタイルやラベルセレクターによって定義されたスタイルなど、スタイルのオーバーラップが発生するため、カスタムスタイルが失敗することがあり、後者は現時点では無効です。その後、最終的なスタイルを使用する必要があります。 IEの最終的なスタイルは、ELE.CURRENTSTYLEとして書かれています。属性名。 DOMの標準執筆方法は、document.defaultview.getComputedStyle（ELEL、NULL）などのdocument.defaultViewオブジェクトを使用することです。これはFFと互換性があります。
[互換性処理]最初にブラウザ（document.all）を判断し、次に上記の方法を実行します。
3。DOMメソッドとオブジェクト参照
1。GetElementByID
[分析手順]コードのセットを見てみましょう。
<！ - オブジェクトアクセスを入力1->
コードコピーは次のとおりです。
<入力id = "id" type = "ボタン"
value = "私をクリックします" onclick = "alert（id.value）"/>
Firefoxでは、ボタンが応答しません。つまり、IEでは問題ありません。つまり、HTML要素のIDはスクリプトの変数名として直接使用できるが、Firefoxでは使用できないからです。
[互換性処理] W3C DOMライティングを使用してみてください。オブジェクトにアクセスするときは、document.getElementByID（ "ID"）を使用してIDを使用してオブジェクトにアクセスし、IDがページに一意である必要があります。また、タグ名でオブジェクトにアクセスする場合は、document.getElementsByTagname（ "div"）[0]を使用します。この方法は、より多くのブラウザによってサポートされています。
<！ - オブジェクトアクセスを入力2->
コードコピーは次のとおりです。
<入力id = "id" type = "button" value = "Click me"
onclick = "alert（document.getElementById（ 'id'）。値）" />
2。コレクションクラスオブジェクトアクセス
[分析ノート] IEでは、（）または[]を使用して、コレクションクラスオブジェクトを取得できます。 Firefoxの下では、[]を使用してCollectionクラスオブジェクトを取得できます。のように：
document.write（document.forms（ "formname"）。src）;
//この書き込み方法は、IEの下のフォームオブジェクトのSCRC属性にアクセスできます
compatibility処理】document.forms（ "formname"）をDocument.forms ["formName"]に変更します。 []を使用して、統一された方法でコレクションクラスオブジェクトを取得します。
3。フレームの参照
[分析ノート] IEは、IDまたは名前を介してこのフレームに対応するウィンドウオブジェクトにアクセスできますが、Firefoxは名前を介してこのフレームに対応するウィンドウオブジェクトのみにアクセスできます。
たとえば、上記のフレームタグが最上部ウィンドウのHTMに記述されている場合、次のようにアクセスできます。
IE：window.top.frameidまたはwindop.top.framenameこのウィンドウオブジェクトにアクセスします。
Firefox：Window.top.Framenameのみを使用して、このウィンドウオブジェクトにアクセスできます。
compatible互換処理frameフレーム名を使用してフレームオブジェクトにアクセスします。さらに、IEとFirefoxの両方を使用して作成できます
window.document.getElementById（ "frameid"）このフレームオブジェクトにアクセスします。
4。ParentElement
[分析の説明] IEは、ParentElementとParentNodeを使用して親ノードを取得することをサポートしています。 FirefoxはParentNodeのみを使用できます。
[互換性処理] FirefoxとIEの両方がDOMをサポートするため、ParentNodeは親ノードにアクセスするために使用されます。
5。テーブル操作
[分析ノート] IEの下の表には、InternhtmlまたはAppendChildで挿入されていても、効果はありませんが、他のブラウザは正常に表示されます。
[互換処理]ソリューションは、以下に示すように、テーブルの<tbody>要素に<tr>を追加することです。
コードコピーは次のとおりです。
var row = document.createelement（ "tr"）;
var cell = document.createelement（ "td"）;
var cell_text = document.createTextNode（ "挿入コンテンツ"）;
Cell.AppendChild（cell_text）;
row.AppendChild（Cell）;
document.getElementsByTagname（ "tbody"）[0] .appendChild（row）;
6.ノードremovenode（）とremovechild（）を削除します
[分析ノート] AppendNodeは通常、IEおよびFirefoxで使用できますが、IEでのみ除去は使用できます。
removenodeメソッドの関数は、ノードを削除することであり、構文はnode.removenode（false）またはnode.removenode（true）であり、戻り値は削除されたノードです。
removenode（false）とは、指定されたノードのみが削除され、このノードの元の子ノードが元の親ノードの子ノードに宣伝されることを意味します。
removenode（true）とは、指定されたノードとそのすべての下位ノードを削除することを意味します。削除されたノードは孤児ノードになり、チャイルドノードと親ノードがなくなりました。
[互換性処理] Firefoxのノードには除去方法がないため、RemoveChildメソッドにのみ置き換えることができます。最初に親ノードに戻り、親ノードから削除するノードを取り外します。
node.parentnode.RemoveChild（node）;
// IEとFirefoxの両方を正常に使用するには、前のレイヤーの親ノードを取り、削除します。
7。子育てによって取得されたノード
[分析ノート] ChildNodes添え字の意味は、IEとFirefoxで異なります。次のコードを見てみましょう。
コードコピーは次のとおりです。
<ul id = "main">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
<入力タイプ=ボタン値= "私をクリックしてください！" onclick =
"alert（document.getElementById（ 'main'）。ChildNodes.length）">
IEとFirefoxでそれぞれ実行すると、IEの結果は3、Firefoxは7です。FirefoxはDOM仕様を使用し、「#Text」はテキスト（実際には意味のないスペースやラインブレークなど）もFirefoxのノードに解析されます。 IEでは、実用的な意味を持つテキストのみが「#text」に解析されます。
compatible互換処理】
方法1：子ノードを取得する場合、node.getElementsByTagname（）でこの問題を回避できます。ただし、getelementsbytagnameは、ChildnodeがDOM階層をよりよく処理できるため、複雑なDOM構造を通過するために子育てを使用するほど良くないことは明らかです。
方法2。実際の使用では、Firefoxが子ノードを横断する場合、forループに追加することもできます。
if（childnode.nodename == "＃text"）継続; //またはnodeType == 1を使用します。
これにより、いくつかのテキストノードをスキップできます。
さらに読む
「IEとFirefoxの子どもの違い」
8。FirefoxはInnertextをサポートできません
[分析ノート] FirefoxはInnertextをサポートせず、Innertextを実装するためにTextContentをサポートしますが、TextContentはInnerTextのような要素を考慮していないため、IEと完全に互換性がありません。 TextContentを使用しない場合、文字列にはHTMLコードが含まれていないため、innerhtmlに置き換えることもできます。また、それを実装する方法を書くこともできます。「FirefoxのInnertext属性の実装」という記事を参照してください。
compary処理の比較broブラウザタイプを審査することで比較します。
コードコピーは次のとおりです。
if（document.all）{
document.getElementById（ 'element'）。innertext = "my text";
} それ以外{
document.getElementById（ 'element'）。textContent = "my text";
}
4。イベント処理
JavaScriptを使用するときにイベント処理が必要な場合は、異なるブラウザのイベント間の違いを知る必要があります。 3つの主要なJavaScriptイベントモデルがあります（NN4、IE4+、W3C/SAFARである「3つのイベントモデルのサポート」を参照してください。
1。window.event
【分析手順starms最初にコードを見てください
コードコピーは次のとおりです。
functionET（）
{
alert（event）; // ie：[object]
}
IEで実行されている上記のコードの結果は[オブジェクト]ですが、Firefoxで実行することはできません。
イベントはIEのウィンドウオブジェクトのプロパティとして直接使用できるが、Firefoxでは、パラメーターを渡す方法を介してイベントを伝播するW3Cモデルを使用するため、機能にイベント応答インターフェイスを提供する必要があります。
[互換性処理]イベントの判断を追加し、ブラウザに従って正しいイベントを取得します。
コードコピーは次のとおりです。
functionET（）
{
evt = evt？evt ：（ window.event？window.event：null）;
// IEおよびFirefoxと互換性があります
アラート（EVT）;
}
2。キーボード値の取得
[分析ノート] IEとFirefoxからキーボード値を取得する方法は異なります。 Firefoxの下でイベントと同等であるイベントは、IEの下のキーコードであることを理解することができます。お互いの違いについては、「キーコードの互換性テストとキーボードイベントのcharcode」を参照してください。
compatible互換処理】
コードコピーは次のとおりです。
関数mykeypress（evt）{
// keyboardEventオブジェクトを取得するためにIEおよびFirefoxと互換性があります
evt =（evt）？ evt ：（（window.event）？window.event： ""）
// IEとFirefoxと互換性があり、KeyboardEventオブジェクトのキー値を取得します
var key = evt.keycode？evt.keycode：evt.which;
if（evt.ctrlkey &&（key == 13 || key == 10））{
// ctrlとEnterは同時に押されました
//何かをしてください。
}
}
3。イベントソースの取得
[分析ノート]イベントデリゲートを使用する場合、イベントがイベントソースの取得を介してどの要素が生まれるかを判断できます。ただし、IEでは、イベントオブジェクトにはsrcelementプロパティがありますが、ターゲットプロパティはありません。 Firefoxでは、均等なオブジェクトにはターゲットプロパティがありますが、srcelementプロパティはありません。
compatible互換処理】
コードコピーは次のとおりです。
ele = function（evt）{//現在のイベントが行動しているオブジェクトをキャプチャします
evt = evt || window.event;
戻る
（obj = event.srcelement？event.srcelement：event.target;）;
}
4。イベント監視
[分析ノート]イベントのリスニングと処理の観点から、つまり2つのインターフェイスを提供します。AttachEventとDetachevent、FirefoxはAddEventListenerとRemoveEventListenerを提供します。
[互換性処理]最も単純な互換性処理は、これら2つのインターフェイスセットをカプセル化することです。
コードコピーは次のとおりです。
関数AddEvent（Elem、EventName、Handler）{
if（elem.attachevent）{
elem.attachevent（ "on" + eventname、function（）{
handler.call（elem）}）;
//ここでコールバックfunction call（）を使用して、このポイントをエレムにします
} else if（elem.addeventlistener）{
ELEM.ADDEVENTLISTENER（EventName、Handler、False）;
}
}
function removeEvent（elem、eventname、handler）{
if（elem.detachevent）{
elem.detachevent（ "on" + eventname、function（）{
handler.call（elem）}）;
//ここでコールバックfunction call（）を使用して、このポイントをエレムにします
} else if（elem.removeeventlistener）{
Elem.RemoveEventListener（EventName、Handler、False）;
}
}
Firefoxの下では、これはイベント処理関数がリスニングされた要素自体を指していることに注意する必要がありますが、IEでは、コールバック関数呼び出しを使用して、現在のコンテキストがリスニングされた要素を指し示すことができます。
5。マウスの位置
[分析ノート] IEの下では、均一なオブジェクトにはxおよびy属性がありますが、pagexとpagey属性はありません。 Firefoxの下では、均一なオブジェクトにはpagexとpagey属性がありますが、xおよびy属性はありません。
[互換性処理] MX（MX = event.x？event.x：event.pagex;）を使用して、ieまたはevent.pagexのfirefoxでevent.xを置き換えます。絶対的な位置は、複雑なポイントで考慮する必要があります
コードコピーは次のとおりです。
関数getAbspoint（e）{
var x = e.offsetleft、y = e.offsettop;
while（e = e.offsetparent）{
x += e.offsetLeft;
y += e.offsettop;
}
alert（ "x：" + x + "、" + "y：" + y）;
}
5。他の違いの互換性処理
1。xmlhttprequest
[分析ノート] new ActiveXObject（ "microsoft.xmlhttp"）; IEでのみ機能します。 Firefoxはそれをサポートしていませんが、xmlhttprequestをサポートしています。
compatible互換処理】
コードコピーは次のとおりです。
関数createxhr（）{
var xhr = null;
if（window.xmlhttprequest）{
xhr = new ActiveXObject（ "msxml2.xmlhttp"）;
}それ以外{
試す {
xhr = new ActiveXObject（ "microsoft.xmlhttp"）;
}
catch（）{
xhr = null;
}
}
if（！xhr）return;
xhrを返します。
}
2。モーダルおよび非モーダルウィンドウ
[分析ノート] IEでは、モーダルと非モーダルのウィンドウをshowmodaldialogおよびshowmodelessdialogを通じて開くことができますが、Firefoxはそれらをサポートしていません。
[solution] Window.open（pageurl、name、パラメーター）を使用して、新しいウィンドウを開きます。パラメーターを渡す必要がある場合は、フレームまたはiframeを使用できます。
3。input.Type属性の問題
IEに基づくinput.typeプロパティは読み取り専用ですが、Firefoxで変更できます。
4.選択した要素でのオプション操作
設定オプション、IEとFirefoxは異なって書かれています：
Firefox：直接設定できます
コードコピーは次のとおりです。
option.text = 'fooooooooo';
IE：設定のみ
コードコピーは次のとおりです。
option.innerhtml = 'fooooooo';
選択オプションを削除する方法：
Firefox：はい
コードコピーは次のとおりです。
select.options.remove（selectedindex）;
IE7：使用できます
コードコピーは次のとおりです。
select.options [i] = null;
IE6：書き込む必要があります
コードコピーは次のとおりです。
select.options [i] .outerhtml = null;
5。IMGオブジェクトALTとタイトルの分析
[分析ノート] IMGオブジェクトには、ALTとタイトルの2つの属性があります。違いは、alt：写真が存在しない場合、または負荷が正しくない場合のプロンプトです。
タイトル：写真のヒント説明。タイトルがIEで定義されていない場合、ALTはIMGの先端として使用することもできますが、Firefoxでは、どちらも標準の定義に従って正確に使用されます。
IMGオブジェクトを定義するとき。
[互換性のある処理]すべてのALTおよびタイトルオブジェクトを作成して、それらをさまざまなブラウザで正常に使用できるようにすることをお勧めします。
6。IMGのSRC更新の問題
[分析手順]最初にコードを見てみましょう：
コードコピーは次のとおりです。
<img id = "pic" onclick = "this.src = 'a.jpg'" src = "aa.jpg" style = "cursor：pointer"/>
IEでは、このコードは画像を更新するために使用できますが、Firefoxでは使用できません。それは主にキャッシュの問題です。
[互換性処理]アドレスの後に乱数を追加すると解決します。
コードコピーは次のとおりです。
<img id = "pic" onclick = "javascript：this.src = this.src+'？'+math.random（）" src = "a.jpg" style = "cursor：pointer"/>
要約します
IEとFirefoxの間にJavaScriptには多くの違いがあります。互換性があるためには、一般的なものをDOM操作、イベント処理、XMLHTTPRequestリクエストなどのJSライブラリに整理する必要があると思います。または、既存のライブラリ（jQuery、Yui、extjsなど）を使用することもできます。ただし、これらの違いを理解する必要があると思います。これは、互換性とユーザビリティコードに参加するのに非常に役立ちます。
問題よりも常に多くの解決策があります。ブラウザがどのように互換性があるとしても、フロントエンド開発はいつでも解決できます！