Show loading indicator in Phonegap InAppBrowser

I am trying to display a loading indicator in Phonegap InAppBrowser when a page is loading using the following code:

    var ref;
    ref = window.open('http://www.google.com', '_top', 'location=no');
    ref.addEventListener('loadstart', function(event) { 
        //navigator.splashscreen.show();
        navigator.notification.activityStart("", "loading");
    });
    ref.addEventListener('loadstop', function(event) { 
        //navigator.splashscreen.hide();
    navigator.notification.activityStop();
    });

It doesn't display the indicator. I think that the z-index is lower then z-index of InAppBrowser.

If I use a splash screen instead of loading indicator it works.

标签： android cordova loading

3条回答

何必那么认真

2楼-- · 2019-04-30 19:47

have a look in the link it explain its in detail. This loading screen do not work with ios but its working absolutely fine on android http://javacourseblog.blogspot.in/2014/02/show-loading-screen-in-phonegap-app.html

0人赞添加讨论(0) 举报

Anthone

3楼-- · 2019-04-30 19:49

You can open InAppBrowser in hidden mode, meanwhile display a spinner, and when it finishes loading hide the spinner and show the InAppBrowser:

showSpinner() // implement by yourself
var popup = window.open(url, "_blank", "location=no,toolbar=no,hidden=yes");
popup.addEventListener("loadstop", function() {
  popup.show();
  hideSpinner(); // implement by yourself
});

0人赞添加讨论(0) 举报

霸刀☆藐视天下

4楼-- · 2019-04-30 20:09

For me, hiding inappbrowser was giving some uncaught error if the page being loaded redirects to another! I had to keep the inappbrowser visible. I was able to inject a spinner to the inappbrowser for improving the user experience by avoiding the awkward white screen.

Custom Spinner

following solution has many alternatives, one can use an html file 'spinner.html' instead of hard-coding the code, but this specific approach is working across platform (nexus 5, pixel 1/2, iphone 6,7)

//use some really slow page for testing
var path="https://www.facebook.com/";

//if you have a spinner.html, you can load that instead of path here in inappbrowser, but make sure it works in all devices.

var ref = cordova.InAppBrowser.open(path, '_blank', 'toolbarposition=top,closebuttoncaption=Back,location=no,hardwareback=no');

//spinner html
var spinner ="<!DOCTYPE html><html><head><meta name='viewport' content='width=device-width,height=device-height,initial-scale=1'><style>.loader {position: absolute;    margin-left: -2em;    left: 50%;    top: 50%;    margin-top: -2em;    border: 5px solid #f3f3f3;    border-radius: 50%;    border-top: 5px solid #3498db;    width: 50px;    height: 50px;    -webkit-animation: spin 1.5s linear infinite;    animation: spin 1.5s linear infinite;}@-webkit-keyframes spin {  0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}@keyframes spin {  0% { transform: rotate(0deg); }  100% { transform:rotate(360deg); }}</style></head><body><div class='loader'></div></body></html>";

//intended webpage is loaded here (facebook)
ref.executeScript({code: "(function() {document.write(\""+spinner+"\");window.location.href='"+path+"';})()"});

//loadstop event
ref.addEventListener('loadstart', function(event) {
    //nothing specific needed for spinner                        
});

//loadstop event
ref.addEventListener('loadstop', function(event) {
    //nothing specific needed for spinner
});

spinner will be overwritten by the actual page once it starts loading.

0人赞添加讨论(0) 举报

Show loading indicator in Phonegap InAppBrowser

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间