Zeigen Ladeanzeige in Phonegap InAppBrowser

Ich versuche zu display eine Ladeanzeige in Phonegap InAppBrowser, wenn eine Seite geladen wird, verwenden Sie den folgenden 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();
    });

Spielt es keine Anzeige des Indikators. Ich denke, dass der z-index niedriger ist als der z-index der InAppBrowser.

Wenn ich ein splash-screen verwenden statt der Ladeanzeige funktioniert es.

InformationsquelleAutor Adrian | 2014-01-22
  1. 8

    Können Sie öffnen InAppBrowser im hidden mode, Zwischenzeit-Anzeige ein spinner, und wenn es fertig geladen ausblenden der spinner und zeigen Sie das 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
});
    • Eröffnung inappbrowser in versteckten Modus führt auf eine andere Frage, in meinem Fall brauche ich eine Spritzen-Skript/html-Dateien zum anzeigen einer geladenen, jede Hilfe?
    InformationsquelleAutor Yossi Shasho
  2. 1

    Für mich, versteckt inappbrowser war, dass einige nicht abgefangene Fehlermeldung, wenn die Seite geladen werden, leitet zu einer anderen! Ich hatte zu halten, das inappbrowser sichtbar. Ich war in der Lage zu injizieren, ein spinner auf die inappbrowser für die Verbesserung der user experience durch die Vermeidung der peinlichen weißen Bildschirm.

    Custom Spinner

    folgende Lösung hat viele alternativen, man kann eine html-Datei 'spinner.html" anstatt hart zu codieren-code, aber dieser spezifische Ansatz ist die Arbeit in der Plattform (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 überschrieben wird, der von der eigentlichen Seite, sobald es beginnt zu laden.

    InformationsquelleAutor ShAkKiR
  3. 0

    einen Blick in den link es erklären, seine im detail. Dieser lade-Bildschirm funktioniert nicht mit ios-es funktioniert jedoch absolut einwandfrei auf android
    http://javacourseblog.blogspot.in/2014/02/show-loading-screen-in-phonegap-app.html

    InformationsquelleAutor Ashisha Nautiyal
Schreibe einen Kommentar