0

初心者の質問ですみせん。
monacaにてInAppBrowserを使ってwebサイトへ飛ばした際に、webサイトが表示されるまでの間にloading画面を付けたいのですが、どのようにすればいいでしょうか。

分かる方是非、お助け下さいm(__)m

1 件の回答 1

1

ons-modalLoading...と表示し、InAppBrowserhidden状態でWebサイトにアクセスします。
読み込みが完了するとloadstopイベントが発火するので、ons-modalを閉じてInAppBrowserを表示します。
ただし、外部ブラウザ(_system)を指定した場合は機能しません。

ons-modal
InAppBrowser プラグイン

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>&nbsp; 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();
    });
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。