古いブラウザに自動で polyfill を適用する

古いブラウザへのes6対応です。

古いブラウザにも一応対応したい。ただし、煩わしいことはしたくない。最新ブラウザでpolyfillによるコード量増加などの悪影響を防ぎたい。とかの場合に使うといいかも…。

ただし、HTML5やCSS3、JavaScriptの最新構文を使用できるわけではないです。polyfillなので…。

コード

特に何も気にしない場合

<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces5%2Ces6"></script>

最新ブラウザでスクリプトの外部読み込みによるパース解析をブロックしたくない場合

/**
 * polyfill-loader.js
 * 同期的にES6のpolyfillを読み込む(IE9から対応)
 */
(function() {
  // アローファンクション構文有無(簡易ES6判定)
  function canUseArrowFunction() {
    try {
      Function('x=>1');
      return true;
    } catch (e) {
      return false;
    }
  }

  // スクリプト同期ローダー
  function scriptSynchronousLoader(url) {
    var xhr = null;
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    } else {
      // IE5 or IE6
      xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    xhr.open('GET', url, false);
    xhr.send(null);

    if (xhr.status === 200) {
      var script = document.createElement('script');
      script.text = xhr.responseText;
      document.head.appendChild(script);
    }
    xhr = null;
  }

  function main() {
    if (!canUseArrowFunction()) {
      // 他にほしいpolyfillがあれば、URLを変更する
      // see https://polyfill.io/v3/url-builder/
      scriptSynchronousLoader('https://polyfill.io/v3/polyfill.min.js?features=default%2Ces5%2Ces6')
    }
  }

  main();
})();

<head>内で他<script>より先に宣言する

補足

polyfill

polyfill.ioを利用しています。polyfill.ioは、リクエストの User-Agent ヘッダーから、要求元ブラウザに適した polyfill を返してくれます。アクセスしたブラウザを認識して必要最小限の polyfill を自動で返してくれます。

IE8

IE8でObject.definePropertyが非DOMオブジェクトのプロパティに対する取得/設定関数はサポートされていません。そのため、polyfillの置き換えの際にエラーとなっているようです。のなで、IE9までしかpolyfillが効かないようです。

es5対応

// strictモード有無(簡易ES5判定)
function canUseStrictMode() {
  return (function() {"use strict"; return typeof this;}).call(1) === 'number';
}

※IE9以下を判定する

参考

コメント: 0

コメントを書く