

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

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


CC BY-SA 3.0
2017-06-22T05:40:43.900
35804
2022-03-05T06:03:15.607
2017-06-22T08:30:56.550
76
23951
question
monaca onsen-ui webview
InAppBrowserでのページ遷移時のloading表示について


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

[ons-modal](https://ja.onsen.io/v2/docs/js/ons-modal.html)  
[InAppBrowser
プラグイン](https://docs.monaca.io/ja/reference/cordova_6.2/inappbrowser/)

**HTML**

[code]

    <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>
    
[/code]

**JavaScript**

[code]

    "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();
        });
    }
    
[/code]


CC BY-SA 3.0
2017-06-22T16:55:57.653
35820
2017-06-22T16:55:57.653
9566
35804
answer