IEとFirefoxのJavaScriptの違いと代替実装方法_JavaScriptスキル

IE と Firefox で js を扱う場合、互換性の問題がよく発生します。ここでいくつかの概要を説明します。

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() を使用してのみカスタム属性を取得できます。
解決策: getAttribute() を通じてカスタム属性を均一に取得します。

4.eval("idName") の問題

説明: IE では、eval("idName") または getElementById("idName") を使用して HTML を取得できます。その ID は idName オブジェクトです。Firefox では、idName の ID を持つ HTML オブジェクトを取得するには getElementById("idName") のみを使用します。
解決策: getElementById("idName") を一律に使用して、 idName.

5. 変数名が HTML オブジェクトの ID と同じである問題

説明: IE では、HTML の ID object はドキュメントの下位オブジェクトの変数名として直接使用できますが、Firefox では HTML オブジェクト ID と同じ変数名を使用できます。
解決策: document.idName の代わりに document.getElementById("idName") を使用します。エラーを減らすために、変数を宣言するときは常に var を追加してください。

6.const の問題

説明: Firefox では定数を定義するために const キーワードまたは var キーワードを使用できますが、IE では var キーワードのみを使用できます。定数を定義します。
解決策: var キーワードを一律に使用して定数を定義します。

7. input.type 属性の問題

説明: IE での input.type属性は読み取り専用ですが、Firefox の input.type 属性は読み書き可能です。

8.window.event の問題

説明: window.event は読み取り専用です。これは、Firefox のイベントはイベントが発生する場面でのみ使用できるためです。
解決策:
IE:

...

IE&Firefox:

...


9.event.x およびevent.y の問題

説明: IE では、even オブジェクトはx、y 属性。ただし、pageX、pageY 属性はありません。Firefox では、even オブジェクトには pageX、pageY 属性がありますが、x、y 属性はありません。
解決策: mX (mX =event.x ?event.x) を使用します。 :event.pageX;) IE のevent.x または Firefox のevent.pageX を置き換えます。

10.event.srcElement の問題

説明: IE では偶数object には srcElement 属性がありますが、target 属性はありません。Firefox では、even オブジェクトには target 属性がありますが、srcElement 属性はありません。解決策: obj (obj =event.srcElement ?event.srcElement :event.target) を使用します。 ;) IE の srcElement または Firefox のevent.target の代わりに。


11.window.location.href の問題
説明: IE または Firefox2.0 の場合。 .x では、window.location または window.location.href を使用できます。Firefox1.5.x では、window.location のみを使用できます。
解決策: window.location.href の代わりに window.location を使用します。 >

12 .モーダル ウィンドウと非モーダル ウィンドウの問題
説明: IE では、showModalDialog および showModelessDialog を通じてモーダル ウィンドウと非モーダル ウィンドウを開くことができますが、これは Firefox では不可能です。 .
解決策: 直接使用します。 window.open(pageURL,name,parameters) メソッドにより、新しいウィンドウが開きます。子ウィンドウのパラメータを親ウィンドウに渡す必要がある場合は、子ウィンドウで window.opener を使用して親ウィンドウにアクセスできます。例: var parWin = window.opener.getElementById("Aqing) ").value = " Aqing";


13.フレームの問題
次のフレームを例に挙げます。


(1) フレーム オブジェクトにアクセスします:
IE: window.frameId または window.frameName を使用して、このフレーム オブジェクトにアクセスします。
Firefox: このフレーム オブジェクトにアクセスするには、window.frameName のみを使用できます。
さらに、IE と Firefox の両方で window.document.getElementById("frameId") を使用して、このフレーム オブジェクトにアクセスできます。

(2) フレームコンテンツの切り替え:
IE と Firefox の両方で、window.document.getElementById("testFrame").src = "xxx.html" または window.frameName.location = "xxx.html" を使用してフレームのコンテンツを切り替えることができます。

フレーム内のパラメータを親ウィンドウに戻す必要がある場合は、 frme のparentを使用して親ウィンドウにアクセスできます。例:parent.document.form1.filename.value="Aqing";

14.body の問題

Firefox の body タグがブラウザによって完全に読み取られません。

は、入力される前に存在します。一方、IE の本体は、ブラウザーによって body タグが完全に読み取られた後に存在する必要があります。 例:
Firefox:



15 . イベント委任メソッド

IE: document.body.onload = inject; //関数 inject() は
Firefox より前に実装されています: document.body.onload = inject() ;
標準は
document.body.onload=new Function('inject()');

16. firefox と IE の親要素の違い ( parentElement)

IE: obj.parentElement
firefox: obj.parentNode
解決策: firefox と IE は両方とも DOM をサポートしているため、obj.parentNode を使用することは良い選択です。

17.cursor:hand VS Cursor:pointer

Firefox は hand をサポートしていませんが、ie はポインタをサポートしています
解決策: ポインタを一律に使用します

18 .innerText は IE では正常に動作しますが、innerText は FireFox では動作しません。

解決策:
if(navigator.appName.indexOf("Explorer") > -1){

document.getElementById('element').innerText = "私のテキスト";

} else{

document.getElementById('element').textContent = "私のテキスト" ;

}

19. FireFox では obj.style.height = imgObj.height のようなステートメントは無効です

解決策:
obj。 style.height = imgObj.height 'px';

20. IE、Firefox、およびその他のブラウザでは、テーブル タグとテーブル タグの使用が許可されません。 tr の innerHTML 割り当てで、js を使用して tr を追加すると、appendChile メソッドが機能しません。

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

21. パディングの問題

padding 5px 4px 3px 1px FireFox は省略形を解釈できないため、padding-top:5px;padding-bottom:3px;

22. ul、ol、その他のリストのインデントを削除する場合、
スタイルは list-style:none;margin:0px;padding:0px; margin 属性が IE に対して有効である場合、padding 属性は FireFox


23 に対して有効です。 CSS 透過性
IE: フィルター: progid:DXImageTransform.Microsoft.Alpha (スタイル=0、不透明度=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 -border-radius- 右下: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-ボトムカラー:#404040 #808080;