.load()メソッド IE10で読み込まれない原因は

IE11では正常にhtmlが読み込まれるのに対して、IE10では表示されない。

IE10は.load()メソッドは対応しているはずなのに・・・。

まず疑ったのはキャッシュ。
キャッシュを全て削除して更新してみたが改善されない。

原因は・・・・。

<script>
  $(function() {
    // 文字コードの修正
    $.ajaxSetup({
      beforeSend: function(xhr) {
        xhr.overrideMimeType("text/html;charset=euc-jp");
      }
    });
    // 共通パーツ読み込み
    $("#header").load("../parts/header.html");
    $("#side").load("../parts/side.html");
    $("#footer").load("../parts/footer.html");
  });
</script>

上記を見たら皆さんお気づきかと思いますが、僕は15分くらい悩んだ末IEのデバックツールで見たら一発でした。（一番最初に確認するべきだった・・・）

文字コードの指定が非対応

文字コードの修正の部分は、euc-jpで作られたhtmlがajaxによってutf-8に強制変換され文字化けしてしまうのを防ぐために書いたのですが、overrideMimeTypeはIE10以下非対応でした。

これのせいでscriptが停止し、読み込まれなかったわけです。

IE10はまだまだ利用者の多いブラウザのため切り捨てるわけにはいかず、パーツとなるhtmlの文字コードをutf-8にし、overrideMimeTypeを廃止しました。

念のため.load()のキャッシュを無効にする

今回の件で調べているうちにキャッシュが原因で1回めのアクセス時に表示されず、リロードすると表示されるなどの不具合があるという記事が見つかったので、念の為にキャッシュさせない設定を組み込みました。

<script>
  $(function() {
    // キャッシュOFF
    $.ajaxSetup({
        cache: false
    });
    // 共通パーツ読み込み
    $("#header").load("../parts/header.html");
    $("#side").load("../parts/side.html");
    $("#footer").load("../parts/footer.html");
  });
</script>