Information About Loading Display During Page Transition in InAppBrowser

I'm sorry for the beginner's question.
When I use InAppBrowser in monaca to fly to the website, I would like to attach a loading screen until the website is displayed. What should I do?

If you understand, please help me m(__)m

monaca onsen-ui webview

2022-09-30 21:24

1 Answers

In ons-modal, display Loading... and access the website with InAppBrowser in the hidden state.
The loadstop event fires upon completion of loading, so close ons-modal to display InAppBrowser.
However, it does not work if you specify an external browser (_system).

ons-modal
InAppBrowser plug-in

HTML

<ons-page>
    <ons-toolbar>
        <div class="center">Test</div>
    </ons-toolbar>
    <br>
    <ons-button onclick="showWeb()">Website View</ons-button>
</ons-page>
<ons-modal>
    <div style="text-align:center;">
        <p>ons-iconion="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() {
    varmodal= 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();
    });
}

2022-09-30 21:24

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656