IEとFirefoxのJavaScript互換性まとめ【おすすめ集】_javascriptスキル

JavaScript の互換性は、Web 開発者にとって長い間大きな問題でした。多くの開発者は、正式な仕様、事実上の標準、実装の違いに苦労しています。このため、IE と Firefox の Javascript の互換性を主に次の側面からまとめます。 > 4. イベント処理;
5. その他の相違点の互換性のある処理。


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

1. get Year() メソッド
【解析の説明】 まず、次のコードを見てください。 >
コードをコピーします

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

var year= new Date().get Year(); document。 write(year); IE で取得される日付は「2010」ですが、Firefox で表示される日付は「110」です。これは主に、Firefox の get Year が「現在の年」の値を返すためです。 1900" 。 [互換処理]

次のように年の判定を追加します。

コードをコピー


コードは次のとおりです。次のように:

var year= new Date().get Year(); year = (year getFull Year getUTCFull Year を通じて呼び出すこともできます:

コードをコピーします

コードは次のとおりです

var year = new Date().getFull Year(); document.write(year); 2. >[解析の説明] IE では、idName の HTML オブジェクトを取得するには eval("idName") または getElementById("idName") を使用できますが、Firefox では getElementById("idName") を使用してのみ取得できます。 ID idName を持つ HTML オブジェクト。 【互換処理】 ididNameのHTMLオブジェクトを取得するには一律getElementById("idName")を使用します。

3. const 文

【解析説明】 const キーワードは IE では使用できません。例:
const constVar = 32;
これは IE の構文エラーです。
【互換処理】constを使用せず、varを使用してください。

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




コードをコピーします


コード


echo=function(str){

document.write(str); } この関数は IE 上で正常に動作します。 Firefox ではエラーが報告されました。 [互換処理] echo の前に var を付けるのが通常です。これが var について言及する目的です。

5. const の問題

【解析説明】 IE では const キーワードは使用できません。 const constVar = 32; など。これは IE の構文エラーです。
【解決策】 const を使用せず、代わりに var を使用してください。


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

1. CSS の「float」属性
[解析の説明] 指定された CSS 値にアクセスするための Javascript の最も基本的な構文は次のとおりです。 .style.property ですが、一部の CSS プロパティは、「float」、「for」、「class」など、JavaScript の予約語と同じ名前を持ちます。ブラウザが異なれば記述方法も異なります。
IE では次のように記述します:
document.getElementById("header").style.styleFloat = "left";
Firefox では次のように記述します:
document.getElementById("header")。 style.cssFloat = "left";
【互換処理】
if(document.all){ document.getElementById("header") と書く前にブラウザがIEかどうかの判定を追加します。 style.styleFloat = "left";
} document.getElementById("header").style.cssFloat = "left";

2. タグの "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 属性にアクセスして設定します
【解析説明】 また、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. オブジェクトの幅と高さの割り当ての問題
【解析説明】 FireFox では obj.style.height = imgObj.height のようなステートメントは無効です。
[互換処理] obj.style.height = imgObj.height 'px';

3. DOM メソッドとオブジェクト参照
1.分析の説明] まず、一連のコードを見てみましょう:

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

< ;!-- 入力オブジェクト アクセス 1 -->
value="click me" ōnclick="alert(id.value) )"/>

Firefox ではボタンが反応しませんが、IE では HTML 要素の ID を変数名として直接使用できるため、問題ありません。スクリプトを使用することはできませんが、Firefox では使用できません。
【互換処理】 オブジェクトにアクセスする際は、document.getElementById("id") を使用し、ページ内で一意な ID を使用してください。タグ名 オブジェクトにアクセスするには、document.getElementsByTagName("div")[0] を使用します。このメソッドは多くのブラウザでサポートされています。

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