ホームページ > 記事 > ウェブフロントエンド > js における互換性とエラーが発生しやすい問題の概要

js における互換性とエラーが発生しやすい問題の概要

小云云オリジナル: 2017-12-18 11:26:031363ブラウズ

また、js の互換性の問題も数多く発生しました。この記事は、js の互換性とエラーが発生しやすい問題をまとめた記事です。これが皆さんの役に立つことを願っています。みんなを助けることができます。

1. 属性関連

通常、属性とプロパティをまとめて属性と呼びますが、実際には異なる概念です。

属性は HTML テキスト内に表示され、その特性への変更は必ずアウター HTML 内に表示されます。要素の要素の要素であり、その機能は要素ノードにのみ存在します。

属性 (プロパティ) は JS オブジェクトを変更します。ブラウザに組み込まれている一部の機能を除き、他の属性操作は HTML テキストには影響しません。

1. IE6/7 は属性と特性を区別しません

他のブラウザーは属性と特性を区別しませんが、IE67 では特性を削除するために属性名しか使用できません。この二人にとって、時代は同じですが、常に違いがあります。

2. IE6/7 は、値が文字列ではない機能を操作するために getAttribute/setAttribute を使用できません

最新のブラウザでは、getAttribute は HTML 内の対応する文字列を確実に返しますが、IE67 によって返される結果は予測できないため、IE67 では次へ, 属性を操作するにはAttributeNodeを使用する必要があります。

3. IE6/7/8 は style 属性を通じて CSS テキストを取得できません

この問題は、IE6/7 が属性と特性を区別しないことが原因で発生します。style 属性を取得する場合は、 elem.style.cssText を使用してください。

4. IE6/7 は相対 URL を絶対 URL に解析します

この問題により、IE6/7 では空の src 属性が繰り返しリクエストを生成することもあります。getAttribute('href/src', 4) を使用できます。

5. 要素の特性のデフォルトの動作が異なります

たとえば、一部の古い Webkit ブラウザでは、チェックボックス/ラジオのデフォルト値がオンではなく「」になります。一部の古い Webkit ブラウザでは、select の最初の要素が選択されません。

2. スタイル操作

通常、スタイルには、インラインスタイルの取得と設定、および要素の計算されたスタイルの取得が含まれます

1. IE は、background-position-x/y をサポートしますが、他のブラウザーは

background-position-x をサポートしません。 /y を使用すると、画像の位置を簡単にグラデーションできます。これがサポートされていない場合は、背景位置属性の解析を使用して処理することを検討できます。

2. IE6/7 は不透明度属性をサポートしていません

アルファフィルターを通じて同じ効果を実現できますが、要素の haslayout をトリガーすることを忘れないでください。

3. IE6/7/8 は、クローンによって生成されたノードに誤っていくつかの属性を継承させます

たとえば、背景を 1 つまたは 2 つ変更すると、それらも同時に変更されます。

4. 計算されたスタイルを取得するさまざまな方法

IE6/7/8 は elem.currentStyle を使用しますが、他のブラウザーは window.getComputedStyle 関数を使用します。

5. さまざまなピクセル化方法

ピクセル化とは、計算を容易にするために、単位がピクセルではない距離をピクセルに変換することを指します。厳密に言えば、これは互換性の問題ではありませんが、全般的に使用される可能性があります。 IE6/7/8では、elem.runtimeStyleとpixelLeftを使用して処理できます。

最新のブラウザでは width 属性を使用できます。

6. CSS 取得時のいくつかのバグ動作

Webkti コアブラウザでは、margin-right が頻繁に失敗します。

3. クエリ操作

クエリの受け渡しとは、いくつかの特徴的な文字列から要素の集合を見つけること、または要素が文字列を満たすかどうかを判断することを指します。

1. IE6/7はidとnameを区別しません

IE6/7でgetElementByIdとgetElementsByNameを使用すると、指定された値と同じidまたは名前を持つ要素が同時に返されます。通常、名前はバックエンドによって合意されるため、JS を作成するときは、ID が名前と重複しないようにする必要があります。

2. IE6/7 は getElementsByClassName と querySelectorAll をサポートしていません

これら 2 つの関数は IE8 以降サポートされているため、IE6/7 では実際には getElementByTagName のみを使用できます。

3. IE6/7 は getElementsByTagName('*') をサポートしていないため、非要素ノードを返します

* を使用しないか、自分でフィルターする関数を作成してください。

4. IE8 の querySelectorAll は属性セレクターに適していません

ほとんどすべてのブラウザーの事前定義属性には問題があるため、カスタム属性を使用するか、属性セレクターを使用しないようにしてください。

5. querySelectorAll は IE8 では疑似クラスをサポートしません

疑似クラスは非常に便利な場合がありますが、IE8 では、first、:last、:even、:odd、:eq、:nth、がサポートされません。 :lt 、 :gt は疑似クラスではないため、いかなる場合も使用すべきではありません。

6. IE9のmatches関数はDOMツリー上にない要素は扱えません

DOMツリー上にない要素であれば必ずfalseを返します、それができない場合は要素を入れてください。もちろん、リフローを避けるために独自のマッチング関数を作成することもできます。

4. イベント操作

通常、誰もが JS の互換性について尋ねると、最初の反応はattachEvent と addEventListener ですが、これら 2 つの関数の違いについてはまだ詳細が不明です。

1. イベントアクションオブジェクトは異なります

addEventListener はイベントがバブルアップされる現在のオブジェクトですが、attachEvent はウィンドウです。

. イベントパラメーターオブジェクトは異なります

attachEvent にバインドされた関数にはパラメーター e が含まれることに注意してください。ただし、この 2 つのパラメーター属性には次のような多くの違いがあります。ボタンまたはウィッチ pageY がサポートされているかどうかなど。

2. 邪悪なローラー事件

ホイールイベントのサポートはめちゃくちゃで、ルールは次のとおりです:
IE6-11 chrome マウスホイールホイールDetla down-120 up 120

firefox DOMMouseScroll 詳細 down 3 up-3

firefox ホイール detlaY down 3 up-3

IE9-11 ホイールデルタ Y 下 40 上 -40

クロームホイールデルタ Y 下 100 上 -100

3. 3 つの非バブルイベント

幸いなことに、ほとんどのブラウザはフォーカスをサポートしません。 /focusout イベントですが、Firefox はこれさえサポートしていません。

IE678 では送信イベントがバブルアップしません。

IE678 では、変更イベントはブラーされるまでトリガーされません。

そして、これら 3 つの問題を解決する有効な手段はなく、シミュレーションをトリガーすることによってのみ対処できます。

4. a.click()

このメソッドは、デフォルトの動作がブロックされていても、多くのブラウザでは安全ではありません。

5. ノード操作

ノード操作とは通常、ノードのコピー、生成、またはノードの位置の移動を指します。

1.. innerHTML

IE6/7/8 で innerHTML を使用する場合、先頭にテキストノードがなければなりません。そうしないと、多くのタグが失われます。さらに、多くの場合、innerHTML を使用すると、defaultValue 属性でエラーが発生します。

2. 役に立たない tbody

IE6/7/8 は空のテーブルに空の tbody を自動的に追加します

3.Node を複製するとき、attachEvent イベントがコピーされます

そして、バインドしたイベントを記録しない限り、それ以外の場合は可能ですそれらを解かないでください。

js における互換性とエラーが発生しやすい問題の概要

関連記事