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

JavaScript の互換性は、Web 開発者にとって長い間大きな問題でした。多くの開発者は、正式な仕様、事実上の標準、実装の違いに苦労しています。この目的を達成するために、主に次の側面から IE と Firefox の Javascript 互換性を要約します。

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

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

1. 関数とメソッドの違い

1. get Year() メソッド

[分析手順] まず次のコードを見てください:

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

var year= new Date().get Year ();

document.write(年);

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

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

コードをコピーします

コードは次のとおりです:var year= new Date().get Year (); 年 = (年

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

コードをコピー

コードは次のとおりです:var year = new Date().getFull Year (); document.write(年);

2. eval() 関数

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

【互換処理】 ididNameのHTMLオブジェクトを取得するには一律getElementById("idName")を使用します。

3. const ステートメント

【分析メモ】constキーワードはIEでは使用できません。例:

コードをコピー

コードは次のとおりです:const constVar = 32;

これは IE の構文エラーです。

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

4. 変数

[分析手順] 次のコードを参照してください:

コードをコピー

コードは次のとおりです。echo=function(str){ ドキュメントを書き込みます。}

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

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

5. const 問題

【分析メモ】constキーワードはIEでは使用できません。 const constVar = 32; など。これは IE の構文エラーです。

【解決策】 const を使用せず、代わりに var を使用してください。

2. スタイルへのアクセスと設定

1.CSS「float」属性

[解析説明] Javascript が特定の CSS 値にアクセスするための最も基本的な構文は object.style.property ですが、一部の CSS プロパティは Javascript の予約語と同じ名前です (「float」、「for」など)。 , "クラス "待って、ブラウザごとに書き方が異なります。 IE でこれを書きます:

コードをコピー

コードは次のとおりです:document.getElementById("header")。 style.styleFloat = "左";

Firefox でこれを書きます:

コードをコピー

コードは次のとおりです:document.getElementById("header")。 style.cssFloat = "左"; 【互換処理】書き込み前にブラウザがIEかどうかの判定を追加：

コードをコピー

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

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

タグ内の「for」にアクセスします。

【解析説明】float属性と同様に、タグ内のforにアクセスする際にも、目に見えない構文の区別が必要です。

IE でこれを書きます:

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

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

Firefox でこれを書きます:

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

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

[互換処理] 解決策は、まずブラウザの種類を判断することです。

3. クラス属性にアクセスして設定します

【解析説明】また、class は Javascript の予約語であるため、これら 2 つのブラウザはこの属性を取得するために異なる JavaScript メソッドを使用します。
IE8.0 より前のすべての IE バージョンを記述する方法:

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

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

IE8.0 および Firefox 書き込みメソッドに適用:

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

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

さらに、setAttribute() を使用して Class 属性を設定する場合、2 つのブラウザ間で同様の違いがあります。

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

setAttribute("className",value);

この書き込み方法は、IE8.0 より前のすべての IE バージョンに適用できます。注: IE8.0 は、「className」属性もサポートしていません。

setAttribute("class",value); IE8.0 および Firefox に適用されます。

【互換加工】

方法 1、両方を書きます:

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

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

方法 2、IE と FF は両方とも object.className をサポートしているため、次のように記述できます:

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

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

方法 3、まずブラウザの種類を決定し、ブラウザの種類に応じて対応する書き込み方法を使用します。

4. オブジェクトの幅と高さの割り当ての問題

【解析説明】 obj.style.height = imgObj.height のような文は FireFox では無効です。

【互換処理】obj.style.height = imgObj.height ‘px’;を使用

5. スタイルを追加します

[解析説明] IE でスタイルを追加するには、addRules() メソッドを使用します。例: styleSheet.addRule("p","color:#ccc",styleSheet.length) このメソッドは FF と互換性がありません。 FF() メソッドの置換で insetRule を使用します。 styleSheet.insertRule("p{color:#ccc}",styleSheet.length) など。

【互換加工】

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

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

6. 最終的なスタイル

【解析解説】クラスセレクターで定義したスタイルとタグセレクターで定義したスタイルなど、スタイルが重複してカスタマイズしたスタイルが無効になる場合があり、その場合後者が無効となります。次に、この時点では最終的なスタイルを使用する必要があります。 IE での最終的なスタイルは ele.currentStyle.property 名として記述されます。 DOM の標準的な記述方法は、document.defaultView.getComputedStyle(elel,null) などの document.defaultView オブジェクトを使用することです。このメソッドは FF.

と互換性があります。

【互換処理】まずブラウザ(document.all)を決定し、上記メソッドを実行します。

3. DOM メソッドとオブジェクト参照

1.getElementById

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

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

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

Firefox ではボタンが反応しませんが、IE では問題ありません。IE では、HTML 要素の ID をスクリプト内の変数名として直接使用できますが、Firefox では使用できないためです。

【互換処理】オブジェクトにアクセスする際は、document.getElementById("id") を使用し、ページ内で一意な ID を使用してください。タグ名オブジェクトにアクセスするには、document.getElementsByTagName("div")[0] を使用します。このメソッドは多くのブラウザでサポートされています。

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

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

【解析説明】 IE では () または [] を使用してコレクションオブジェクトを取得できますが、Firefox では [] を使用してのみコレクションオブジェクトを取得できます。例:

document.write(document.forms("formName").src);

//この書き込みメソッドは、IE の Form オブジェクトの scrc 属性にアクセスできます

【互換処理】document.forms("formName")をdocument.forms["formName"]に変更します。コレクションクラスのオブジェクトを取得するには、一律 [] を使用します。

3. フレームへの参照

【解析説明】IEはこのフレームに対応するウィンドウオブジェクトにIDまたは名前でアクセスできますが、Firefoxはこのフレームに対応するウィンドウオブジェクトに名前でしかアクセスできません。

たとえば、上記のフレームタグがトップレベルウィンドウ内の htm に記述されている場合、次のようにアクセスできます:

IE: このウィンドウオブジェクトにアクセスするための window.top.frameId または window.top.frameName;

Firefox: このウィンドウオブジェクトには、window.top.frameName を通じてのみアクセスできます。

【互換処理】フレームオブジェクトへのアクセスにはフレームの名前を使用します。また、IE、Firefoxでも利用可能です。

window.document.getElementById("frameId") を使用して、このフレームオブジェクトにアクセスします。

4. 親要素

【解析説明】IEは親ノードの取得にparentElementとparentNodeを使用することをサポートしています。 Firefox はparentNode のみを使用できます。

【互換性】 Firefox、IEともにDOMをサポートしているため、親ノードへのアクセスにはparentNodeを使用します。

5. テーブル操作

【解析説明】 IE 上の表では、innerHTML を使用しても、appendChild を使用してを挿入しても影響はありませんが、他のブラウザでは正常に表示されます。

[互換性処理] 解決策は、以下に示すように、テーブルの

要素にを追加することです。

コードをコピー

コードは次のとおりです。var row = document.createElement("tr "); var cell = document.createElement("td"); var cell_text = document.createTextNode("コンテンツの挿入");

cell.appendChild(cell_text);

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: 子ノードを取得するときに、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 など) を使用することも選択しますが、これらの違いを理解することが依然として必要であると思います。これは、互換性とユーザビリティコードに参加するのに役立ちます。

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