初心者の質問ですみせん。
monacaにてInAppBrowserを使ってwebサイトへ飛ばした際に、webサイトが表示されるまでの間にloading画面を付けたいのですが、どのようにすればいいでしょうか。
分かる方是非、お助け下さいm(__)m
ons-modal
でLoading...
と表示し、InAppBrowser
をhidden
状態でWebサイトにアクセスします。
読み込みが完了するとloadstop
イベントが発火するので、ons-modal
を閉じてInAppBrowser
を表示します。
ただし、外部ブラウザ(_system
)を指定した場合は機能しません。
HTML
<ons-page>
<ons-toolbar>
<div class="center">Test</div>
</ons-toolbar>
<br>
<ons-button onclick="showWeb()">Webサイト表示</ons-button>
</ons-page>
<ons-modal>
<div style="text-align: center;">
<p><ons-icon icon="md-spinner" size="28px" spin></ons-icon> Loading...</p>
</div>
</ons-modal>
JavaScript
"use strict";
ons.ready(function() {
console.log("Onsen UI is ready!");
});
function showWeb() {
var modal = document.querySelector("ons-modal");
modal.show();
var ref = window.open("http://ja.stackoverflow.com/", "_blank", "location=no,hidden=yes");
ref.addEventListener("loadstop", function(e) {
modal.hide();
ref.show();
});
}