JavaScript におけるブラウザ互換性の問題について簡単に説明します

JavaScript におけるブラウザ互換性の問題について簡単に説明します

ブラウザの互換性は、実際の開発では見落とされがちな最も重要な部分です。古いバージョンのブラウザの互換性の問題について話す前に、まず機能検出とは何かを理解する必要があります。これは、ブラウザにこの機能があるかどうかを検出するために、つまり、現在のブラウザが呼び出されるプロパティまたはメソッドをサポートしているかどうかを判断するために使用されます。以下に簡単な紹介をいくつか示します。

1. innerText と innerContent
1) innerTextとinnerContentは同じ機能を持つ
2) innerTextはIE8以前のブラウザでサポートされています
3) innerContent Firefoxの古いバージョンでは
4) 新しいバージョンのブラウザは両方の方法をサポートしています

JavaScriptコードコンテンツをクリップボードにコピー
  1. // 古いバージョンのブラウザは innerText と innerContent と互換性があります  
  2.    if (要素.textContent) {
  3.          element.textContentを返します。
  4. }それ以外{
  5.         element.innerTextを返します。
  6. }

2. 兄弟ノード/要素の取得における互換性の問題

1) すべてのブラウザでサポートされているブラザーノード

①nextSibling 次の兄弟ノード。非要素ノードの場合もある。テキストノードが取得される。

②previousSibling 前の兄弟ノード。非要素ノードの場合もある。テキストノードが取得される。

2) 兄弟要素はIE8より前ではサポートされていません

①previousElementSiblingは、空白を無視して、前の隣接する兄弟要素を取得します。

②nextElementSiblingは、空白を無視して次の隣接する兄弟要素を取得します。

JavaScriptコードコンテンツをクリップボードにコピー
  1. //互換性のあるブラウザ  
  2. // 次の隣接する兄弟要素を取得します  
  3. 関数getNextElement(要素) {
  4.     // 能力テスト  
  5.    if (要素.nextElementSibling) {
  6.        element.nextElementSiblingを返します。
  7. }それ以外{
  8.           varノード = element.nextSibling;
  9.           （ノード＆＆ノード.nodeType！== 1）{
  10. ノード = node.nextibling;
  11. }
  12.          ノードを返します。
  13. }
  14. }

JavaScriptコードコンテンツをクリップボードにコピー
  1. /**
  2. * 前の要素を返す
  3. * @param要素
  4. * @returns {*}
  5. */   
  6. 関数getPreviousElement(要素) {
  7.      if (要素.前の要素兄弟) {
  8.          element.previousElementSiblingを返します。
  9. }それ以外{
  10.          var el = element.previousSibling;
  11.          (el && el.nodeType !== 1)の場合{
  12. el = el.previousSibling;
  13. }
  14.          el を返します。
  15. }
  16. }
JavaScriptコードコンテンツをクリップボードにコピー
  1. /**
  2. * 最初の要素firstElementChildのブラウザ互換性を返します
  3. * @param 親
  4. * @returns {*}
  5. */   
  6. 関数getFirstElement(親) {
  7.     親要素の最初の子要素の場合
  8.         親.firstElementChildを返します。
  9. }それ以外{
  10.          var el = parent.firstChild;
  11.          (el && el.nodeType !== 1)の場合{
  12. el = el.nextSibling;
  13. }
  14.          el を返します。
  15. }
  16. }
JavaScriptコードコンテンツをクリップボードにコピー
  1. /**
  2. * 最後の要素を返す
  3. * @param 親
  4. * @returns {*}
  5. */   
  6. 関数getLastElement(親) {
  7.     親要素の最後の子要素の場合
  8.         親.lastElementChildを返します。
  9. }それ以外{
  10.          var el = parent.lastChild;
  11.          (el && el.nodeType !== 1)の場合{
  12. el = el.previousSibling;
  13. }
  14.          el を返します。
  15. }
  16. }
JavaScriptコードコンテンツをクリップボードにコピー
  1. /**
  2. * 現在の要素のすべての兄弟要素を取得します
  3. * @param要素
  4. * @returns {配列}
  5. */   
  6. 関数兄弟(要素) {
  7.      if (!要素) return ;
  8.        
  9.      var要素 = [ ];
  10.      var el = element.previousSibling;
  11.     一方で（エル）{
  12.          el.nodeType === 1 の場合{
  13. 要素をプッシュします。
  14. }
  15. el = el.previousSibling;
  16. }
  17. el = 要素.前の兄弟;
  18.      一方で（el）{
  19.          el.nodeType === 1 の場合{
  20. 要素をプッシュします。
  21. }
  22. el = el.nextSibling;
  23. }
  24.         要素を返します。
  25. }

3. 配列.filter();

// 指定された関数を使用してすべての要素をテストし、テストに合格したすべての要素を含む新しい配列を作成します

JavaScriptコードコンテンツをクリップボードにコピー
  1. // 古い環境と互換性あり  
  2. if (!Array.prototype.filter)
  3. {
  4. Array.prototype.filter = function (fun /*, thisArg */ )
  5. {
  6.      「厳密な使用」 ;
  7.      ( this === void 0 || this === null )の場合
  8.       投げる 新しいTypeError();
  9.      var t = Object( this );
  10.      var len = t.length >>> 0;
  11.      if (関数の型がfun !== "function" )
  12.       投げる 新しいTypeError();
  13.      var res = [];
  14.      var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
  15.      ( var i = 0; i < len; i++)の場合
  16. {
  17.       もし（iがtの中にある）
  18. {
  19.          var val = t[i];
  20.          // 注意: 技術的には、これはObject.definePropertyで  
  21.          // 次のインデックス、プッシュは影響を受ける可能性がある  
  22.          // Object.prototype および Array.prototype のプロパティ。   
  23.          // しかし、このメソッドは新しく、衝突は  
  24.          // まれなので、より互換性のある代替手段を使用してください。   
  25.          if (fun.call(thisArg, val, i, t))
  26. res.push(val);
  27. }
  28. }
  29.      resを返します。
  30. };
  31. }

4. 配列.forEach();
 // 配列を走査する
JavaScriptコードコンテンツをクリップボードにコピー
  1. //古い環境と互換性あり  
  2. // ECMA-262、第 5 版、15.4.4.18 の作成手順  
  3. // 参考: http://es5.github.io/#x15.4.4.18   
  4. if (!Array.prototype.forEach) {
  5. Array.prototype.forEach =関数(コールバック、thisArg) {
  6.      var T、k;
  7.     もしこれがnullならば​
  8.       投げる  new TypeError( ' これは null または定義されていません' );
  9. }
  10.      // 1. OをtoObject()を呼び出して、   
  11.      // |this| 値を引数として渡します。   
  12.      var O = Object( this );
  13.      // 2. lenValueをGet()内部呼び出しの結果とする  
  14.      // 引数「length」を持つ O のメソッド。   
  15.      // 3. lenをtoUint32(lenValue)とします。   
  16.      var len = O.length >>> 0;
  17.      // 4. isCallable(callback) が false の場合は TypeError をスローします  
  18. 例外。//参照: http://es5.github.com/#x9.11   
  19.      if (コールバックの型!== "関数" ) {
  20.       投げる  new TypeError(callback + ' は関数ではありません' );
  21. }
  22.      // 5. thisArgが指定された場合はTをthisArgとする。そうでない場合は  
  23.      // T は未定義です。   
  24.     引数の長さが1より大きい場合
  25. T = この引数;
  26. }
  27.      // 6. kを0とする  
  28. 0 = 0;
  29.      // 7. k < len の間繰り返します  
  30.      (k < 長さ)の間
  31.        var kValue;
  32.        // a. Pk を ToString(k) とします。   
  33.        // これは in 演算子の LHS オペランドに対して暗黙的に行われます  
  34.        // b. kPresentをHasPropertyの呼び出し結果とする  
  35.        // 引数 Pk を持つ O の内部メソッド。   
  36.        // このステップはcと組み合わせることができます  
  37.        // c. kPresentがtrueの場合、   
  38.        (kが Oの場合) {
  39.          // i. kValueをGet内部呼び出しの結果とする  
  40.          // 引数 Pk を持つ O のメソッド。   
  41. k値 = O[k];
  42.          // ii. T を引数としてコールバックの内部メソッド Call を呼び出す  
  43.          // kValue、k、および O を含む this 値と引数リスト。   
  44. コールバック。呼び出し(T、kValue、k、O);
  45. }
  46.        // d. k を 1 増やします。   
  47. 関数
  48. }
  49.      // 8. undefined を返す  
  50. };
  51. }

5. 登録イベント
JavaScriptコードコンテンツをクリップボードにコピー
  1. .addEventListener = function (type,listener,useCapture) { };
  2. //最初のパラメータイベント名  
  3. //2番目のパラメータイベント処理関数（リスナー）   
  4. //3番目のパラメータtrueはfalseバブルをキャプチャします  
  5. //IE9以降のみサポート
  6. // 古い環境と互換性あり  
JavaScriptコードコンテンツをクリップボードにコピー
  1. varイベントツール = {
  2. addEventListener:関数(要素、イベント名、リスナー) {
  3.              //能力テスト  
  4.             要素を追加する場合
  5. element.addEventListener(イベント名、リスナー、 false );
  6. }それ以外 要素を添付イベントにする場合
  7. element.attachEvent( "on" + イベント名、リスナー);
  8. }それ以外{
  9. 要素[ "on" + イベント名] = リスナー;
  10. }
  11. },
  12.   
  13. // イベントを削除するには、匿名関数は使用できません  
  14. removeEventListener:関数(要素、イベント名、リスナー) {
  15.             要素を削除する場合{
  16. element.removeEventListener(イベント名、リスナー、 false );
  17. }それ以外  if (element.detachEvent) { //IE8 は以前に .attachEvent を登録し、イベント .detachEvent を削除しました  
  18. element.detachEvent( "on" +イベント名、リスナー);
  19. }それ以外{
  20. 要素[ "on" + イベント名] = null ;
  21. }
  22. }
  23. };

6. イベントオブジェクト

1) イベントパラメータeは標準的な方法で取得されるイベントオブジェクトです。

btn.onclick = 関数(e) { }

2) e.eventPhase イベントフェーズ、IE8 より前ではサポートされていません

3) e.target は常にイベントをトリガーしたオブジェクト (クリックされたボタン) です。

i) IE8 以前の srcElement

ii) ブラウザの互換性

var target = e.target || window.event.srcElement;

JavaScriptコードコンテンツをクリップボードにコピー
  1. // ブラウザと互換性のあるイベントオブジェクトを取得します  
  2. getEvent:関数(e) {
  3.      return e || window.event; // e イベント オブジェクトを取得する標準的な方法。window.event IE8 以前のイベント オブジェクトを取得する方法  
  4. }
  5. // ターゲットと互換性あり  
  6. getTarget:関数(e) {
  7.      e.target || e.srcElementを返します。
  8. }

7. ページ上のマウスの位置を取得する

① 可視領域内の位置: e.clientX e.clientY

②文書内の位置：

i) e.pageX e.pageY

ii) ブラウザの互換性

JavaScriptコードコンテンツをクリップボードにコピー
  1. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  2.   
  3. var pageY = e.clientY + scrollTop;

8. ページのスクロール距離を取得する

JavaScriptコードコンテンツをクリップボードにコピー
  1. // 互換性のあるブラウザ  
  2. var scrollTop = document.documentElement.scrollTop || document.body.scrolltop;

9. テキストの選択を解除

JavaScriptコードコンテンツをクリップボードにコピー
  1. // 互換性のあるブラウザ  
  2. window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

JavaScript におけるブラウザ互換性の問題に関する上記の簡単な説明は、エディターが皆さんと共有する内容のすべてです。これが皆さんの参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。

<<:  Dockerコンテナは定期的にデータベースをバックアップし、指定されたメールボックスに送信します（設計アイデア）

>>:  vue3+TypeScript+vue-routerの使い方

推薦する

ネイティブJavaScriptカルーセル実装方法

この記事では、JavaScriptカルーセルの実装方法を参考までに紹介します。具体的な内容は次のとお...

【HTML要素】画像の埋め込み方法

img 要素を使用すると、HTML ドキュメントに画像を埋め込むことができます。画像を埋め込むには、...

javascript:void(0) の意味と使用例

voidキーワードの紹介まず、void キーワードは JavaScript で非常に重要なキーワード...

Linux redis-Sentinel 設定の詳細

ダウンロードダウンロードアドレス: https://redis.io/download /usr/l...

HTML 基本ノート (推奨)

1. ウェブページの基本構造: XML/HTML コードコンテンツをクリップボードにコピー<...

win10環境でDockerをインストールする実装

1. Docker公式サイトにアクセスするまず、Dockerの公式ウェブサイトにアクセスして、最新の...

シンプルなドラッグ効果を実現するjs

この記事では、簡単なドラッグ効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...

文字列の最初の文字を取得してテキストアイコン機能を実現する純粋なCSS

CSS でテキストアイコンを実装する方法 /*アイコンスタイル*/ .nav-icon-norma...

MySQL テーブルを削除する際の I/O エラーの原因分析と解決方法

問題現象最近、sysbench を使用して MySQL をテストしました。テストに長い時間がかかった...

Alpine Dockerイメージフォント問題解決操作

1. フォントを実行し、フォント フォルダーを開いて、使用するフォント ファイルを見つけます。 2....

HTML フォーム送信アクションと URL ジャンプアクションの違い

フォームのアクションは URL ジャンプとは異なります。フォームはバックグラウンドにデータを渡すこと...

React Diff Principle の詳細な分析

目次差分アルゴリズムレイヤーごとの比較同じタイプのコンポーネントを比較する同じタイプの要素の比較子ノ...

MySQL テーブルにはどのくらいの量のデータを保存できますか?

プログラマーは MySQL を扱う機会が多く、毎日触れているとも言えますが、MySQL テーブルには...

Linux で大きなファイルの指定された内容を見つける方法

大きなことも小さなことも考えて、方向転換しましょう。 Linux では非常に大きなファイルに遭遇する...

Jenkins統合Dockerプラグインの問題を解決するいくつかの方法

目次背景質問1エラー 2エラー 3エラー4要約する背景テスト環境では、docker プラグインを統合...