适用于 Android 的 Cordova InAppBrowser 加载微调器答案

【问题标题】：Cordova InAppBrowser Loading Spinner for Android适用于 Android 的 Cordova InAppBrowser 加载微调器
【发布时间】：2015-08-10 21:28:18
【问题描述】：

我有一个使用 cordova 和 InAppBrowser 构建的应用程序。我试图在每个页面中显示一个“加载微调器”。在 iOS 中，它在我加载的每个页面上都运行良好，但 Android 失败了。在 iOS 上，我刚刚在 CDVInappBrowser.m 中编辑了 self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray] 这一行，并且可以正常工作。 Android 有类似的功能吗？

这是我的代码：

       // Cordova is ready
        function onDeviceReady() {

            var ref = window.open("http://m.estadao.com.br/?load-all=true", "_blank", "location=no", "toolbar=no", "closebuttoncaption=a", "EnableViewPortScale=no");

            navigator.notification.activityStart("Loading", "Loading...");
            setTimeout(function(){
                navigator.notification.activityStop();
            }, 5000);
         }

【问题讨论】：

标签： android ios cordova phonegap-plugins inappbrowser

【解决方案1】：

检查这个插件： https://github.com/Paldom/SpinnerDialog

在 Android 中为我工作。您应该使用此方法显示带有标题和消息的微调器：

window.plugins.spinnerDialog.show("Loading","Loading...");

你的代码是：

  function onDeviceReady() {

        var ref = window.open("http://m.estadao.com.br/?load-all=true", "_blank", "location=no", "toolbar=no", "closebuttoncaption=a", "EnableViewPortScale=no");

        window.plugins.spinnerDialog.show("Loading","Loading...");
        setTimeout(function(){
            window.plugins.spinnerDialog.hide();
        }, 5000);
  }

【讨论】：

很好的解决方案！对我来说效果很好！
老实说，这不是一个好的解决方案，因为您永远不知道页面完成加载需要多长时间。这里使用 5 秒和setTimeout。我不是说这个方法行不通而是不好。
解决方案是使用提到的插件并按照它所说的调用它。该代码只是使其适应 vbotio 公开的场景。确实，对我来说使用setTimeout 也没有任何意义

【解决方案2】：

Resvolvi dessa forma

//window.open 示例

 // Wait for device API libraries to load
   document.addEventListener("deviceready", onDeviceReady, false);
   function onDeviceReady() {
    // external url
   // var ref = window.open(encodeURI('http://mfsom.com.br/'), '_blank', 'location=no','toolbar=no');
   //relative document
     ref = window.open('http://mfsom.com.br/','_self',',location=no');

ref.addEventListener('loadstart', loadstartCallback);
ref.addEventListener('loadstop', loadstopCallback);
ref.addEventListener('loadloaderror', loaderrorCallback);
ref.addEventListener('exit', exitCallback);

function loadstartCallback(event) {

    showSpinnerDialog();

}

function loadstopCallback(event) {
    hideSpinnerDialog();
}

function loaderrorCallback(error) {
console.log('Erro ao carregar: ' + error.message)

}

function exitCallback() {
console.log('O navegador está fechado...')

}

function showSpinnerDialog() {
navigator.notification.activityStart("Carregando..");
//$.mobile.loading("show");
}

function hideSpinnerDialog() {
navigator.notification.activityStop();
    //$.mobile.loading("hide");
}

// Handle the Cordova pause and resume events
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener( 'resume', onResume.bind( this ), false );

// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.

};

【讨论】：

【解决方案3】：

由于此处的两个答案都使用了已弃用的 activityStop()，因此请使用您在应用中使用的自己的微调器来防止 InAppBrowser 的空白打开屏幕

使用hidden=yes 选项打开InAppBrowser，稍后在loadstop 事件监听器中显示InAppBrowser。在那之前你可以展示你的自定义加载器

var ref = window.open("http://m.estadao.com.br/?load-all=true", "_blank", "location=no,toolbar=no,closebuttoncaption=a,EnableViewPortScale=no,hidden=yes");
ref.addEventListener('loadstart', function() {
  showLoader();//`showLoader()` is your own loader function to show loader within your app
});
ref.addEventListener('loadstop', function() {
  ref.show();
  hideLoader();//`hideLoader()` is your own loader function to hide loader within your app
});

【讨论】：