可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

回答1:

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
});

回答2:

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

回答3:

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.