IE および Firefox で互換性のある JavaScript 記述方法のまとめ_javascript スキル

1. IE の input タグの id 属性はデフォルトで name 属性と同じであることがわかりますが、Firefox では id 属性の名前を明確に書かないと id 属性が使用できません。
例:
次のコードは IE では実行できますが、Firefox では実行できません:


次のコードに変更する必要があります:

以下は再現されます: 1. document.formName.item("itemName") 問題

説明: IE では document.formName.item("itemName") を使用できます。または document .formName.elements["elementName"];
Firefox では、document.formName.elements["elementName"] のみを使用できます。
解決策: document.formName.elements["elementName"] を一律に使用します。 .
2. コレクション オブジェクトに関する問題
説明: IE では () または [] を使用してコレクション オブジェクトを取得できますが、Firefox では [] を使用してのみコレクション オブジェクトを取得できます。
解決策: コレクション クラス オブジェクトを取得するには [] を一律に使用します。 3. カスタム属性の問題

説明: IE では、通常の属性を取得する方法を使用できます。または、getAttribute() を使用してカスタム属性を取得することもできます。Firefox では、getAttribute() を使用してカスタム属性を取得することもできます。
4. eval(" idName") の問題
説明: IE では、eval("idName") または getElementById("idName") を使用して ID idName を持つ HTML オブジェクトを取得できますが、Firefox ではのみ可能です。 idName の ID を持つ HTML オブジェクトを取得するには、getElementById("idName" ) を使用します。
解決策: idName の ID を持つ HTML オブジェクトを取得するには、一律に getElementById("idName") を使用します。変数名が HTML オブジェクトの ID と同じです 問題
説明: IE では、HTML オブジェクトの ID をドキュメントの下位オブジェクトの変数名として直接使用できます。 Firefox では、HTML オブジェクト ID と同じ変数名を使用できますが、IE では使用できません。
解決策: document.idName の代わりに document.getElementById("idName") を使用します。エラーを減らすために、変数を宣言するときは常に var を追加してください。
6.const の問題
説明: Firefox では定数の定義に const キーワードまたは var キーワードを使用できますが、IE では定数の定義に var キーワードのみを使用できます。解決策: var キーワードを一律に使用して定数を定義します。
7. Input.type 属性の問題

説明: IE の input.type 属性は読み取り専用です。 Firefox での読み取りと書き込みの場合。
8.window.event の問題
説明: window.event は IE でのみ実行できますが、Firefox では実行できません。これは、Firefox のイベントが実行できるためです。イベントが発生するオンサイトで使用されます。Firefox はパラメーターを渡すためにソースからイベントを追加する必要があります。 Ie はこのパラメータを無視し、window.event を使用してイベントを読み取ります。 解決策:
IE&Firefox: Submitted(event)"/> …


window.open("b.html","","modal=yes,width = 500,height=500,resizable=no,scrollbars=no");

9.event.x およびevent.y の問題
説明: IE では、偶数オブジェクトには x、y があります。属性はありますが、pageX、pageY 属性はありません。Firefox では、偶数オブジェクトには pageX、pageY 属性がありますが、x、y 属性はありません。解決策: mX (mX =event.x ?event.x :event. pageX; ) を使用してイベントを置き換えます。;Firefox では、even オブジェクトには target 属性がありますが、srcElement 属性はありません。 IE または Firefox のevent.target でのevent.srcElement イベント

11.window.location.href issue
の互換性の問題にも注意してください: IE または Firefox2.0 の場合.x の場合は、window.location.href を使用できます。Firefox1.5.x では、window.location のみを使用できます。
解決策: window.location.href の代わりに window.location を使用します。 🎜>12. モーダル ウィンドウと非モーダル ウィンドウの問題

説明: IE では、showModalDialog と showModelessDialog を使用してモーダル ウィンドウと非モーダル ウィンドウを開くことができます。解決策: を使用します。 window.open(pageURL,name direct ,parameters) して新しいウィンドウを開きます。 子ウィンドウのパラメーターを親ウィンドウに戻す必要がある場合は、子ウィンドウで window.opener を使用してアクセスできます。例: var parWin = window.opener; parWin.document .getElementById("Aqing").value = "Aqing";

13.フレームの問題
例:

(1) フレーム オブジェクトへのアクセス:
IE: このフレーム オブジェクトにアクセスするには、window.frameId または window.frameName を使用します。frameId と FrameName は同じ名前にすることができます。
Firefox: このフレーム オブジェクトにアクセスするには window.frameName のみを使用できます。さらに、IE と Firefox の両方で window.document.getElementById("frameId") を使用できます。 >( 2) フレームの内容を切り替える:
両方の IE でフレームを切り替えるには、window.document.getElementById("testFrame").src = "xxx.html" または window.frameName.location = "xxx.html" を使用できます。 フレーム内のパラメータを親ウィンドウ (オープナーではなく親フレームであることに注意してください) に渡す必要がある場合は、 frme のparentを使用して親ウィンドウにアクセスできます。例:parent.document.form1.filename.value="Aqing";
14.body の問題
ブラウザが body タグを完全に読み取る前に Firefox の本体が存在します。
IE の body タグが完全に読み取られた後に存在する必要があります。
IE: document.body.onload = inject;
Firefox: document.body.onload = inject();
16. Firefox と IE の親要素 (parentElement) の違い
IE: obj .parentElement
firefox: obj.parentNode
解決策: firefox と IE は両方とも DOM をサポートしているため、obj.parentNode を使用することは良い選択です。 Firefox はハンドをサポートしていませんが、IE はポインタをサポートしています
解決策: ポインタを一律に使用します
18. innerText は IE では正常に動作しますが、innerText は FireFox では動作しません。
解決策:
if(navigator.appName.indexOf("Explorer") > -1){ document.getElementById('element').innerText = "私のテキスト"; } else{
document.getElementById('element').textContent = "my text"; }

19. FireFox で HTML タグのスタイルを設定する場合、すべての位置とフォント サイズの値の後には px が続く必要があります。このieもサポートされています。
20. IE、Firefox、およびその他のブラウザーでは、table タグに対する操作が異なります。IE では、js を使用して tr を追加する場合、appendChild メソッドは機能しません。

解決策:
//テーブルに空の行を追加します: var row = otable.insertRow(-1);
var cell = document.createElement("td"); cell.innerHTML = " ";
cell.className = "XXXX";

パディングの問題

3px 1px FireFox は省略形を解釈できません。
は、padding-top:5px; padding-bottom:3px;

に変更する必要があります。リストをインデントする場合、 スタイルは次のように記述する必要があります: list-style:none;margin:0px;padding:0px;
ここで、margin 属性は IE とパディングに対して有効です。属性は FireFox

で有効です。 23. CSS 透明度
IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF:不透明度:0.6。

24. CSS 角丸 IE: 角丸はサポートされていません。
FF: -moz-border-radius:4px、または -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -ボーダー半径-右下:4px;。

25. CSS 二重線バンプボーダー IE: border:2px offset;。
FF: -moz-border-top-colors: #d4d0c8 ホワイト;-moz-border-left-colors: #d4d0c8 ホワイト;-moz-border-right-colors:#404040 #808080;-moz-border- bottom-colors: #404040 #808080;

26. select のオプション コレクションに対する操作 [] に加えて、列挙要素に対して selectName.options.item() も使用できます。さらに、selectName .options.length、selectName.options.add/remove は両方のブラウザで使用できます。追加後の要素の割り当てには注意してください。そうしないと失敗します (これは私がテストしたものです)。

27. XMLHTTP の違い
//mf if (window.XMLHttpRequest) //mf
{
xmlhttp=new XMLHttpRequest() xmlhttp . xmlhttp.open("GET",url,true)
xmlhttp.send(null)
}
//ie
else if (window.ActiveXObject) // IE 用のコード
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (xmlhttp)
{
xmlhttp.
xmlhttp.open("GET",url,true)
xmlhttp.send()
}
}
}

28. innerHTML の違い

Firefox は innerHTML をサポートしていません。解決策は次のとおりです
rng = document.createRange();
el = document.getElementById(elementid);
htmlFrag = rng.createContextualFragment(content); .hasChildNodes()) //元のコンテンツをクリアし、新しいコンテンツを追加します。 el.removeChild(el.lastChild);
29. 🎜>
IE では
を使用して画像を更新できますが、FireFox では使用できません。これは主にキャッシュの問題であり、アドレスの後に乱数を追加することで解決できます。 onclick イベント コードを「this.src=this.src '?'」のように編集します。