JavaScript ブラウザ互換性の概要と一般的なブラウザ互換性分析_JavaScript スキル

この記事は、JS の互換性の問題と、IE や Firefox などの一般的に使用されるブラウザーの互換性分析について、Script House の編集者が毎日まとめたものです。JS ブラウザーの互換性に関する知識に興味がある友人は、一緒に学んでください。

1. 子と子ノード

子、IE が提供する childNodes、および firefox の childNode の動作は異なります。Firefox の ChildNode は、改行文字と空白文字を親ノードの子ノードとしてカウントしますが、IE の childNode と子の動作は異なります。例:

<div id="dd">
<div>yizhu2000</div>
</div> 

d が dd である div は、IE では childNodes を使用して表示されますが、ff では子ノードの数は 3 です。Firefox の dom ビューアからは、その childNode が ["n ", div であることがわかります。 、「ん」]。

Firefox で Children 属性をシミュレートするには、次のようにします:

if (typeof(HTMLElement) != "undefined" && !window.opera) {
HTMLElement.prototype.__defineGetter__("children", function() {
for (var a = [], j = 0, n, i = 0; i < this.childNodes.length; i++) {
n = this.childNodes[i];
if (n.nodeType == 1) {
a[j++] = n;
if (n.name) {
if (!a[n.name])
a[n.name] = [];
a[n.name][a[n.name].length] = n;
}
if (n.id)
a[n.id] = n;
}
}
return a;
});
} 

2. firefox と IE の事件

window.event は IE でのみ使用できますが、Firefox では使用できません。これは、Firefox のイベントがイベントが発生する場面でのみ使用できるためです。 Firefox は、パラメータを渡すためにソースからイベントを追加する必要があります。 IE はこのパラメータを無視し、window.event を使用してイベントを読み取ります。

たとえば、IE でマウスの位置を取得する方法は次のとおりです:

<button onclick="onClick()" >获得鼠标点击横坐标</button>
<script type="text/javascript">
function onclick(){
alert(event.clientX);
}
</script> 

を

に変更する必要があります

<button onclick="onClick(event)">获得OuterHTML</button>
<script type="text/javascript">
function onclick(event){
event = event || window.event;
alert(event.clientX);
}
</script> 

両方のブラウザで使用できます

3.HTMLオブジェクト取得の問題

FireFox取得メソッド document.getElementById("idName")

つまり、document.idname または document.getElementById("idName") を使用します

解決策: document.getElementById("idName");

を使用します。

4. const 問題

Firefox では、const キーワードまたは var キーワードを使用して定数を定義できます。

IE では、var キーワードのみを使用して定数を定義できます。

解決策: var キーワードを一律に使用して定数を定義します。

5.フレームの問題

次のフレームを例として取り上げます:

<frame src="xxx.html" id="frameId" name="frameName" /> 

a) フレームオブジェクト にアクセスします

IE: このフレーム オブジェクトにアクセスするには、window.frameId または window.frameName を使用します。

Firefox: このフレーム オブジェクトには window.frameName を使用してのみアクセスできます。

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

b) フレームコンテンツの切り替え

IE と Firefox の両方で動作します

window.document.getElementById("testFrame").src = "xxx.html" または window.frameName.location = "xxx.html"

フレームのコンテンツを切り替えます。

フレーム内のパラメータを親ウィンドウ (オープナーではなく親であることに注意してください) に戻す必要がある場合は、フレーム内でparentを使用して親ウィンドウにアクセスできます。例:

parent.document.form1.filename.value="Aqing";

6. 身体の問題

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

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

IE: obj.parentElement

firefox:obj.parentNode

解決策: Firefox と IE はどちらも DOM をサポートしているため、すべて obj.parentNode を使用します

8.InnerText の問題

innerText は IE では正常に動作しますが、innerText は FireFox では動作しません。textContent を使用する必要があります。 解決策:

9. AJAX と XMLHTTP の違い

if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText = "my text";
} else {
document.getElementById('element').textContent = "my text";
} 

注: IE では、xmlhttp.send(content) メソッドのコンテンツを空にすることができますが、Firefox では、Send("") を使用する必要があります。そうしないと、411 エラーが発生します。

var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} elseif (window.ActiveXObject) { // IE的获取方式
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} 

この記事で紹介したJavaScriptブラウザ互換性のまとめと一般的なブラウザ互換性分析について、編集者がここで紹介しますので、お役に立てれば幸いです。