OnsenUIを使用したCordovaアプリをInternet Explorer 11(以下IE11)で実行した場合、ブラウザは起動するのですが真っ白い画面のままHTML画面が表示されません。
IE11の開発者ツールからJavaScriptコンソールを確認してもエラーなどは表示されていませんでした。
IE11で起動する際には以下のコマンドで実行しています。
cordova run browser
※デフォルトブラウザをIE11に変更後にコマンドを実行。
念のためWindowsアプリとして実行させたところ、以下のエラーが表示されました。
SCRIPT16386: ハンドルされない例外 下記ソースコードの行 9519、列 5 で発生しました。ms-appx://io.onsen.sampleapp/www/lib/onsen/js/onsenui.js
0x80004002 - JavaScript 実行時エラー: インターフェイスがサポートされていません
onsenui.js (9519,5)
Windowsアプリとして実行させる際には以下のコマンドを実行しています
cordova run windows
※config.xmlには「<preference name=“windows-target-version” value=“8.1” />」を指定。
- プロジェクト環境
OnsenUI 2.8.2
cordova-cli 7.0.0
cordova-browser 5.0.1
cordova-windows 5.0.0
- 実行環境
Windows 10(64bit)
Internet Explorer 11 11.64.16299.0
問題再現を行った最小限のソースは以下になります。
- index.html (www/index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="ja">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<!-- Poliyfill -->
<script src="lib/promise-polyfill/promise.js"></script>
<script src="scripts/polyfill_CustomEvent.js"></script>
<script src="scripts/polyfill_remove.js"></script>
<!-- Unused Poliyfill? -->
<!--<script src="scripts/polyfill_classList.js"></script>-->
<!--<script src="scripts/polyfill_Set_Map_WeakMap.js"></script>-->
<!--<script src="scripts/polyfill_MutationObserver.js"></script>-->
<script src="scripts/platformOverrides.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css" />
</head>
<body>
<script src="cordova.js"></script>
<script src="scripts/index.js"></script>
<ons-navigator id="myNavigator"></ons-navigator>
</body>
</html>
- index.js (www/scripts/index.js)
(function () {
"use strict";
document.addEventListener("deviceready", function () {
ons.ready(onOnsenUIReady);
});
window.onerror = function (msg, url, line, col, error) {
alert("Error 1:" + msg);
return false;
};
window.addEventListener("error", function (e) {
alert("Error 2:" + e.error.message);
});
})();
function onOnsenUIReady(event) {
document.addEventListener("init", onInit);
var myNavigator = document.getElementById("myNavigator");
myNavigator.pushPage("html/page1.html");
}
function onInit(event) {
if (event.target.id === "Page1") {
console.debug("Page1 Init!");
alert("Page1 Init!");
}
}
- page1.html (www/html/page1.html)
<ons-page id="Page1">
This is Page1.
</ons-page>
今回のアプリはIE11で動作させる必要があるため、Polyfillを導入する必要があります。
OnsenUIをIE11で使用するために導入すべきPolyfillが以下に記載されています。
https://ja.onsen.io/v2/guide/faq.html#furuiburauznosapto
今回追加したPolyfillは外部から導入した物のため、OnsenUIに適合しているのか不安があります。
OnsenUIで動作確認の取れているPolyfill実装があったら教えてください。
また、記載されているPolyfill追加以外に、エラー対応などのために必要な処理があるのでしょうか？
- English digest
An error occurred when IE 11 executed it.
I would like to know Polyfill which was confirmed to work on OnsenUI.
Also, I would like to know other measures if necessary.