Microsoft EdgeでUTF-8が文字化けする

ヘッダーのcharsetに「UTF-8」を設定してある状態で、UTF-8で設定してあるjavascriptファイルとCSSファイルを読み込むと文字化けしてしまった。

chromeやfirefoxでは発生しなかった。

原因がわからなかったため、苦肉の策でHTML側から定義を送るように修正して対応

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
  <script src="test.js"></script>
  <script>
  var entry = {
     "1" : "テスト１",
     "2" : "テスト２"
  };
  $(document).ready(function(){
      testController.initialize(entry);
      $("#test").html( testController.getParam(1) );
  });
  </script>
</head>
<body>
        <p id="test"></p>
</body>
</html>

test.js

var testController = function(){
    var returnObj = {};
    var entry = {};

    returnObj.initialize = function (entry_param){
        entry = entry_param;
    }
    returnObj.getParam = function (type){
        if(type in entry){
            return entry[type];
        }
        return "";
    }
}();

具体的なコードは少し違うが、パラメータを渡すようにして作った感じが伝われば良いと思います。

原因

調べると、同じ事例のケースがあり試してみたところ、確かに文字化けしたため、たぶん原因だと思われる。

対処方法は不明です。

Microsoft Edgeでjavascript,cssファイルが文字化けする

Microsoft EdgeでUTF-8が文字化けする

原因