JavaScript IE と Firefox の互換性の問題と一般的な example_javascript スキルの概要

1. document.formName.item("itemName") 問題
説明: IE では、document.formName.item("itemName") または document.formName.elements["elementName" を使用できます。 ] ;
Firefox では、document.formName.elements["elementName"] のみを使用できます。
解決策:
コレクションを一律に使用します。クラス オブジェクトの問題
説明: IE では、() または [] を使用してコレクション オブジェクトを取得できますが、Firefox では、[] を使用してのみコレクション オブジェクトを取得できます。
解決策: [] を一律に使用します。
3. カスタム属性の問題
説明: IE では、通常の属性を取得するメソッドを使用することも、getAttribute() を使用してカスタム属性を取得することもできます。カスタム属性を取得する; Firefox では、カスタム属性を取得するには getAttribute() のみを使用できます。
解決策:
4.eval("idName") の問題
注: IE では、eval("idName") または getElementById("idName") を使用して idName の ID を持つ HTML オブジェクトを取得できますが、Firefox では getElementById("idName") のみを使用して取得できます。 idName の HTML オブジェクトを取得します。
解決策: idName の HTML オブジェクトを取得するには、
5 を使用します。 HTML オブジェクトの ID と同じ
説明: IE では、HTML オブジェクトの ID を Firefox ではドキュメントの下位オブジェクトの変数名として直接使用できますが、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)"/> …


9.event.x およびevent.y の問題
注: IE では、偶数オブジェクトには x、y 属性がありますが、pageX、pageY 属性はありません。Firefox では、偶数オブジェクトには pageX、pageY 属性がありますが、x、y 属性はありません。
解決策: mX (mX = events. .x ?event.x :event.pageX;) IE のevent.x または Firefox のevent.pageX を置き換えます。
10.event.srcElement の問題
説明: IE では、 event オブジェクトには srcElement 属性がありますが、target 属性はありません。Firefox では、even オブジェクトには target 属性がありますが、srcElement 属性はありません。
解決策: obj (obj =event.srcElement ?event.srcElement :event) を使用します。 .target;) IE のevent.srcElement、またはFirefoxのevent.targetを置き換えるには、event
11.window.location.href issue
の互換性の問題にも注意してください。 IE または Firefox2 の場合は、window.location または window.location.href を使用できます。Firefox 1.5.x の場合は、window.location のみを使用できます。
解決策: window.location の代わりに window.location を使用します。 .href.
12. モーダル ウィンドウと非モーダル ウィンドウの問題
説明: IE では、モーダル ウィンドウと非モーダル ウィンドウを Firefox では開くことができます。
解決方法: window.open(pageURL, name,parameters) を直接使用して新しいウィンドウを開きます
子ウィンドウのパラメーターを親ウィンドウに渡す必要がある場合は、window.opener を使用できます。例:var parWin = window.document.getElementById("Aqing").value = "Aqing"; >
次のフレームを例に挙げます。
(1) フレーム オブジェクトにアクセスします。
IE: このフレーム オブジェクトにアクセスするには、window.frameId または window.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
IE の親要素 (parentElement) の違い: 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 で有効であり、padding 属性は 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 . onreadystatechange=xmlhttpChange
xmlhttp.open("GET",url,true) xmlhttp.send(null) }
//ie
else if (window.ActiveXObject) // IE のコード
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (xmlhttp)
{
xmlhttp.onreadystatechange=xmlhttpChange
xmlhttp.open("GET" , url,true)
xmlhttp.send()
}
}
}

28. innerHTML

Firefox は innerHTML をサポートしていません。解決策は次のようになります。
rng = document.createRange();
el = document.getElementById(elementid);
htmlFrag = rng.createContextualFragment(content);
while ( el.hasChildNodes()) //元のコンテンツをクリアし、新しいコンテンツを追加します
el.removeChild(el.lastChild); el.appendChild(htmlFrag);