Microsoft Edgeでons-navigatorのpushPageが動作しない
-
OnsenUIを使用したCordovaアプリをMicrosoft Edgeで実行した場合、ons-navigatorのpushPageで画面遷移を行おうとすると、Edge標準の「このページを読み込めません」画面が表示されてしまいます。
Edgeの開発者ツールからJavaScriptコンソールを確認しようとしても、「このページを読み込めません」画面表示の際にコンソールがクリアされるためエラーなどは確認出来ません。
なお、他ブラウザ(Chrome)やAndroid端末等で実行させた場合は同様の問題は発生しない事を確認しています。
Edgeで動作させるには何かアプリ側の対応等が必要でしょうか?Edgeで起動する際には以下のコマンドで実行しています。
cordova run browser --target=edge環境は以下になります。
- プロジェクト環境
OnsenUI 2.7.0
cordova-cli 7.0.0
cordova-browser 5.0.1 - 実行環境
Windows 10(64bit)
Microsoft Edge 40.15063.674.0
Microsoft EdgeHTML 15.15063
問題再現を行った最小限のソースは以下になります。
- 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" /> <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); }); })(); function onOnsenUIReady(event) { document.addEventListener("init", onInit); var myNavigator = document.getElementById("myNavigator"); myNavigator.pushPage("html/page1.html"); } function onInit(event) { // It does not come here for Microsoft Edge 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>
-
補足
OnsenUIのライブラリ「lib/onsen/js/onsenui.js」の32240行目で処理が止まり、次の処理に進まないように見えます。
具体的には以下の処理です。
internal.doc.write(’<template id="’ + page + ‘">’ + html + ‘</template>’); -
English digest
OnsenUI’s pushPage(ons-navigator) does not work on Microsoft Edge.
Chrome and Android devices have no problem.
Does the application need measures?
- プロジェクト環境
-
@imanishik マスターブランチではこれを直したかもしれません。最後のビルドをダウンロードできます:+1:
-
@Fran-Diox 2.7.0-build.5335に差し替えて確認したところ、Microsoft Edgeにて動作する事を確認しました。
素早いレスポンスありがとうございます。