IE および FF における JavaScript の互換性の問題_基礎知識-jsチュートリアル-php.cn

1. 関数とメソッドの違い
3. DOM メソッドとオブジェクト参照
>5. その他の相違点互換性のある処理。

document.write(年);
IE で取得される日付は「2010」ですが、Firefox で表示される日付は「110」です。これは主に、Firefox の get Year が「現在年 - 1900」の値を返すためです。

【互換処理】以下のような年の判定を追加します。

getFull Year getUTCFull Year:
を通じて呼び出すこともできます。

2. eval() 関数

【解析説明】IE では idName の ID を持つ HTML オブジェクトを取得するには eval("idName") または getElementById("idName") を使用できますが、Firefox では getElementById("idName") のみを使用できます。 idName の HTML オブジェクトの ID を取得します。

【互換処理】constを使用せず、varを使用してください。

この機能は IE では正常に動作しますが、Firefox ではエラーが報告されます。

[互換処理] echo の前に var を付けるのが通常です。これが var について言及する目的です。

コードをコピー

if(document.all){ //
document.getElementById("header").style.styleFloat = "left";
}
else{ //つまり未定義の場合
document.getElementById("header").style.cssFloat = "left"
}

var myObject = document.getElementById("myLabel ");
var myAttribute = myObject.getAttribute("htmlFor");

var myObject = document.getElementById("myLabel ");
var myAttribute = myObject.getAttribute("for");

var myObject = document.getElementById("header ");
var myAttribute = myObject.getAttribute("className");

var myObject = document.getElementById("header ");
var myAttribute = myObject.getAttribute("class");

setAttribute("className",value);

var myObject = document.getElementById("header ");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue");
//ヘッダークラスを classValue に設定します

var myObject = document.getElementById("header ");
myObject.className="classValue";//ヘッダークラスを classValue に設定します

if(styleSheet.insertRule){
// insertRule() メソッド
}else{
//addRule() メソッド
}

value="クリックしてください" ōnclick="alert(id.value)"/>

onclick="alert(document.getElementById('id').value)" />
2. コレクションクラスオブジェクトへのアクセス

row.appendChild (セル);
document.getElementsByTagName("tbody")[0].appendChild(row);

6. ノードを削除しますremoveNode() とremoveChild()

【解析説明】appendNodeはIEとFirefoxで通常通り利用できますが、removeNodeはIEでのみ利用可能です。

removeNode メソッドの機能は、ノードを削除することです。構文は、node.removeNode (false) または node.removeNode (true) です。戻り値は、削除されたノードです。

removeNode (false) は、指定されたノードのみを削除し、このノードの元の子ノードが元の親ノードの子ノードに昇格することを意味します。

removeNode(true) は、指定されたノードとそのすべての下位ノードを削除することを意味します。削除されたノードは孤立ノードになり、子ノードと親ノードがなくなります。

【互換処理】FirefoxにはノードのremoveNodeメソッドが存在せず、removeChildメソッドでのみ置き換えることができます。まず親ノードに戻り、削除したいノードを親ノードから削除します。

node.parentNode.removeChild(node);

// IE および Firefox で正常に動作するには、前のレイヤーの親ノードを取得して削除します。

7. childNodes によって取得されたノード

【解析説明】IEとFirefoxではchildNodesの添字の意味が異なります。以下のコードを見てください。

コードをコピーコードは次のとおりです:

1

方法 1: 子ノードを取得するときに、node.getElementsByTagName() を使用してこの問題を回避できます。ただし、getElementsByTagName は、childNodes の方が DOM 階層をより適切に処理できるため、複雑な DOM 構造の走査に関しては childNodes ほど優れていないことは明らかです。

方法 2: 実際のアプリケーションでは、Firefox が子ノードを走査するときに、for ループに

if(childNode.nodeName=="#text") continue;//または、nodeType == 1 を使用します。

これにより、いくつかのテキストノードをスキップできるようになります。

多読

「IE と FireFox の childNodes の違い」

8. Firefox は innerText をサポートできません

【解析説明】 Firefox は innerText をサポートしていません。 innerText を実装するために textContent をサポートしていますが、textContent は innerText のような要素の表示方法を考慮していないため、IE と完全な互換性はありません。 textContent が使用されない場合、文字列に HTML コードが含まれていない場合は、代わりに innerHTML を使用できます。 js を使用してメソッドを作成することもできます。「Firefox の innerText 属性の実装」の記事を参照してください。

【互換処理】ブラウザの種類を判断して互換：

コードをコピーします

コードは次のとおりです:if(document.all){ document.getElementById('element').innerText = "私のテキスト";

4. イベント処理

JavaScript の使用時にイベント処理が関与する場合は、さまざまなブラウザーでのイベントの違いを理解しておく必要があります。JavaScript イベント モデルには 3 つの主要なイベント モデルがあります (「一度に 3 つのイベント モデルをサポートする」を参照)。それらは NN4、IE4、および です。 W3C/サファール。

[分析手順] まずコードを見てみましょう

コードをコピー

function et(){ alert (イベント);//IE: [オブジェクト]}

IE で上記のコードを実行した結果は [object] ですが、Firefox では実行できません。 

IE ではイベントをウィンドウ オブジェクトの属性として直接使用できますが、Firefox では W3C モデルが使用され、パラメーターを渡すことでイベントを伝播します。つまり、イベント応答インターフェイスを提供する必要があります。 

[互換処理] 異なるブラウザに応じて正しいイベントを取得するためのイベント判定を追加:

コードをコピー

function et(){ evt =evt?evt:(window.event?window.event:null); //IE および Firefox と互換性がありますalert(evt);}

2. キーボード値の取得

【解析説明】IEとFirefoxではキーボード値の取得方法が異なりますが、Firefoxのevent.thatはIEのevent.keyCodeに相当することがわかります。それぞれの違いについては「キーボードイベントのkeyCodeとcharCodeの互換性テスト」を参照してください

【互換加工】

コードをコピーコードは次のとおりです。

function myKeyPress(evt){
 //互換性のある IE および Firefox は keyBoardEvent オブジェクトを取得します 
evt = (evt) ? evt : ((window.event) ? window.event : "") 
 // キー値を取得するための IE および Firefox と互換性がありますkeyBoardEvent オブジェクトの 
var key = evt.keyCode?evt.keyCode:evt.that; 
if(evt.ctrlKey && (key == 13 || key == 10)){ 
 // Ctrl と Enter を同時に押します Key
//何かをします;
}
}

3. イベントソースの取得

[分析説明] イベント委任を使用する場合、イベントがどの要素から来たのかを判断するためにイベントソースが取得されます。ただし、IE ではイベントオブジェクトに srcElement 属性がありますが、Firefox ではeven オブジェクトに target 属性がありません。 target 属性はありますが、srcElement 属性はありません。

【互換加工】

コードをコピーコードは次のとおりです。

ele=function(evt){ //現在のイベントをキャプチャします。 アクションのオブジェクト
evt=evt||window.event;
 return
 (obj=event.srcElement?event.srcElement:event.target;);
}

4. イベント監視

【分析説明】イベントのリスニングと処理に関して、IE にはattachEventとdetachEventの2つのインターフェースがあり、FirefoxにはaddEventListenerとremoveEventListenerが用意されています。

[互換性処理] 最も単純な互換性処理は、次の 2 つのインターフェイスのセットをカプセル化することです。

コードをコピーコードは次のとおりです。

function addEvent(elem,eventName,handler) { 
if (elem.attachEvent) { 
elem.attachEvent("on" eventName, function(){ 
handler.call(elem)}); // コールバック関数 call();ここで使用されているのは、elem 
} else if (elem.addEventListener) { 
elem.addEventListener(eventName, handler, false) 
} 
} 
function removeEvent(elem) を指すようにします。 ,eventName,handler) { 
 if (elem.detachEvent) { 
 elem.detachEvent("on"eventName, function(){ 
 (), これを elem 
 を指すようにします。} else if ( elem.removeEventListener) { 
 elem.removeEventListener(eventName, handler, false) 
 } 
}

Firefox では、イベントハンドラー関数の this が監視対象要素自体を指すことに注意することが重要ですが、IE ではそうではありません。コールバック関数呼び出しを使用して、現在のコンテキストが監視対象要素を指すようにすることができます。要素。

5. マウスの位置

[解析説明] IE では偶数オブジェクトは x、y 属性を持ちますが、pageX、pageY 属性は持ちません; Firefox では偶数オブジェクトは pageX、pageY 属性を持ちますが、x、y 属性は持ちません。

【互換処理】IEのevent.x、Firefoxのevent.pageXをmX(mX =event.x ?event.x :event.pageX;)で置き換えます。物事をさらに複雑にするために、絶対位置も考慮する必要があります

コードをコピーコードは次のとおりです。

function getAbsPoint(e){

 var x = e.offsetLeft, y = e.offsetTop; 
while (e = e.offsetParent) { 
x = e.offsetLeft; 
} 
アラート(" x:" x "," "y:" y);

5.その他相違点の互換処理

1. XMLHttpRequest

【解析説明】new ActiveXObject("Microsoft.XMLHTTP"); はIEのみで動作し、Firefoxではサポートされていませんが、XMLHttpRequestはサポートされています。

【互換加工】

コードをコピー

コードは次のとおりです:

function createXHR() { 
var xhr=null; 
if(window.XMLHttpRequest){ 
xhr=new ActiveXObject("Msxml2.XMLHTTP"); 
try { 
xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
catch() { 
xhr=null; 
} 
if (!xhr)return; 
return 
} 

2. モーダルウィンドウと非モーダルウィンドウ

【解析説明】IEではshowModalDialogとshowModelessDialogでモーダルウィンドウと非モーダルウィンドウを開くことができますが、Firefoxではサポートされていません。

【解決方法】 window.open(pageURL, name,parameters) を直接使用して新しいウィンドウを開きます。パラメータを渡す必要がある場合は、frame または iframe を使用できます。

3. input.type 属性の問題

input.type 属性は IE では読み取り専用ですが、Firefox では変更できます

4. 選択要素のオプション操作

オプションを設定するには、IE と Firefox では異なる記述方法があります:

Firefox: 直接設定可能

コードをコピーコードは次のとおりです。

option.text = 'foooooooo';

IE: のみ設定可能

コードをコピーコードは次のとおりです。

option.innerHTML = 'fooooooo';

選択したオプションを削除する方法:

Firefox: はい

コードをコピーコードは次のとおりです。

select.options.remove(selectedIndex);

IE7:使用可能

コードをコピーコードは次のとおりです。

select.options[i] = null;

IE6: を記述する必要があります

コードをコピーコードは次のとおりです。

select.options[i].outerHTML = null;

5. img オブジェクトの alt と title の分析

【解析説明】 img オブジェクトには alt と title という 2 つの属性がありますが、異なるのは alt: 写真が存在しない場合や読み込みエラーが発生した場合のプロンプトです。

title: 写真のヒントの説明。IE でタイトルが定義されていない場合は、alt を img のヒントとして使用することもできます。ただし、Firefox では、両方とも標準の

で定義されているとおりに使用されます。

img オブジェクトを定義するとき。

【互換処理】様々なブラウザで正常に利用できるよう、altオブジェクトやtitleオブジェクトは全て記述するのがベストです。

6. img src の更新の問題

[分析手順] まずコードを見てみましょう:

コードをコピーコードは次のとおりです:

IE ではこのコードを使用して画像を更新できますが、FireFox では使用できません。主にキャッシュの問題です。

【互換処理】問題を解決するにはアドレスの後に乱数を追加します:

コードをコピーコードは次のとおりです:

概要

IE と Firefox の間には Javascript に多くの違いがあります。互換性を実現するには、DOM 操作、イベント処理、XMLHttpRequest リクエストなどのいくつかの共通のものを js ライブラリに整理する必要があると思います。いくつかの既存のライブラリ (jQuery、YUI、ExtJs など) を使用することも選択しますが、これらの違いを理解することが依然として必要であると思います。これは、互換性とユーザビリティコードに参加するのに役立ちます。

ブラウザの互換性に問題がある場合でも、フロントエンド開発者はいつでも簡単に解決できます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

IE および FF における JavaScript の互換性の問題_基礎知識

関連記事