Android 在应用浏览器的Phonegap中显示加载指示器_Android_Cordova_Loading

Android 在应用浏览器的Phonegap中显示加载指示器

android cordova

Android 在应用浏览器的Phonegap中显示加载指示器,android,cordova,loading,Android,Cordova,Loading,当使用以下代码加载页面时，我试图在应用浏览器中的Phonegap中显示加载指示器： var ref; ref = window.open('http://www.google.com', '_top', 'location=no'); ref.addEventListener('loadstart', function(event) { //navigator.splashscreen.show(); navigator.notifica

当使用以下代码加载页面时，我试图在应用浏览器中的Phonegap中显示加载指示器：

    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低

如果我使用启动屏幕而不是加载指示器，它会工作。

查看链接，详细解释它的功能。这个加载屏幕不适用于ios，但在安卓系统上工作完全正常

您可以在

隐藏

模式下打开

应用浏览器

，同时显示微调器，加载完成后隐藏微调器并显示

应用浏览器

：

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

对我来说，如果正在加载的页面重定向到另一个页面，隐藏在AppBrowser中会产生一些未捕获的错误！我必须让浏览器保持可见。我能够在iApp浏览器中插入一个微调器，通过避免尴尬的白色屏幕来改善用户体验

自定义微调器

下面的解决方案有很多选择，可以使用html文件“spinner.html”而不是硬编码代码，但这种特定的方法可以跨平台工作（nexus 5，pixel 1/2，iphone 6,7）

//使用一些非常慢的页面进行测试
变量路径=”https://www.facebook.com/";
//如果您有一个spinner.html，您可以在inappbrowser中加载它，而不是在此处加载路径，但请确保它在所有设备中都能工作。
var ref=cordova.InAppBrowser.open（路径为“_blank”，“toolbarposition=top，closebuttoncaption=Back，location=no，hardwareback=no”）；
//微调器html
var spinner=“.loader{position:absolute；margin left:-2em；left:50%；top:50%；margin top:-2em；border:5px solid#f3f3；border radius:50%；border top:5px solid#3498db；width:50px；height:50px；-webkit动画：旋转1.5s线性无限；动画：旋转1.5s线性无限；}-webkit关键帧旋转{0%{-webkit变换：旋转（0度）；}100%{-webkit变换：旋转（360度）；}}@关键帧旋转{0%{变换：旋转（0度）；}100%{变换：旋转（360度）；}”；
//此处加载了预期网页（facebook）
ref.executeScript（{code:”（function（）{document.write（\“”+spinner+“\”）；window.location.href='“+path+”；}）（）”）；
//加载停止事件
参考addEventListener（'loadstart'，函数（事件）{
//微调器不需要任何特定的设置
});
//加载停止事件
参考addEventListener（'loadstop'，函数（事件）{
//微调器不需要任何特定的设置
});

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

在隐藏模式下打开inappbrowser会导致其他问题。在我的情况下，我需要插入脚本/html以显示加载的，有帮助吗？

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