Question

我正在尝试使用以下代码加载页面时在Phonegap InAppBrowser中显示加载指示符：

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

它不显示指标。我认为z-index低于InAppBrowser的z-index。

如果我使用启动画面而不是加载指示符，则可以正常工作。

Answer 1

您可以在InAppBrowser模式下打开hidden，同时显示微调器，加载完成后隐藏微调器并显示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
});

Answer 2

查看链接，详细解释它。这个加载屏幕不适用于ios，但它在android上工作得非常好 http://javacourseblog.blogspot.in/2014/02/show-loading-screen-in-phonegap-app.html

Answer 3

对我来说，如果正在加载的页面重定向到另一个页面，则隐藏inappbrowser会发出一些未被捕获的错误！我必须保持inappbrowser可见。我能够通过避免尴尬的白色屏幕向inappbrowser注入一个微调器以改善用户体验。

自定义微调器

以下解决方案有很多替代方案，可以使用html文件'spinner.html'而不是硬编码代码，但这种特定的方法可以跨平台工作（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
});

一旦开始加载，微调器将被实际页面覆盖。

在Phonegap InAppBrowser中显示加载指示器

3 个答案: