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の使い方

推薦する

24 の実用的な JavaScript 開発のヒント

目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...

VMware15 centos7 ブリッジモード ssh に突然アクセスできなくなる問題を解決する

仮想マシンに独自の LAN IP を持たせたいので、テストを容易にするためにブリッジを使用します。 ...

CentOS7 のシステム サービスに Nginx を追加する方法

導入コンパイル、インストール、問題の解決後、Nginx は正常に動作していますが、現時点では Ngi...

初心者がHTMLタグを学ぶ(3)

関連記事:初心者が学ぶ HTML タグ (2)導入された HTML タグは、必ずしも XHTML 仕...

URL 書き換えモジュール 2.1 URL 書き換えモジュールのルール記述

目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...

ジョセフリング問題を解決する 3 つの JavaScript メソッド

目次概要問題の説明循環リンクリスト順序付き配列数学的再帰要約する概要ジョセフ・リング問題は、ジョセフ...

Vue 父子価値移転、兄弟価値移転、子父価値移転の詳細な説明

目次1. 親コンポーネントが子コンポーネントに値を渡す1. 親コンポーネント.vue 2. サブコン...

MySQLで論理SQLを置き換える際の落とし穴を回避する方法の詳細な説明

重複キーの置換と挿入の違い置換の使用法競合がない場合、挿入と同等となり、他の列のデフォルト値が使用さ...

Javascriptのクロージャとアプリケーションの詳細な説明

目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...

CSS3 でテキスト ストロークを実装する 2 つの方法 (要約)

質問最近、以下に示すように、テキストストローク効果を実現するという要件に遭遇しました。 解決策1まず...

MySQLの構文、特殊記号、正規表現の詳細な説明

Mysql でよく使用される表示コマンド1. 現在のデータベース サーバー内のデータベースの一覧を表...

nginxリバースプロキシを介したデバッグコードの実装

背景現在、会社のプロジェクトは、フロントエンドとバックエンドが分離された方法で開発されています。新し...

良いデザインについて

<br />「良いデザインとは何か」と答える 1 万人に対して、少なくとも 1 万 1 ...

MySQLインデックスの失敗の典型的なケース

目次典型的なケース付録: 一般的なインデックス障害の状況典型的なケース次の構造を持つ 2 つのテーブ...

Docker を使用した SQL Server の実行の実装

現在、.net Core はクロスプラットフォームであり、誰もが Linux と Docker を使...