(cordova) (inappbrowser) 让用户知道您正在准备他们的页面答案

【问题标题】：(cordova) (inappbrowser) Let users know that you're getting their page ready(cordova) (inappbrowser) 让用户知道您正在准备他们的页面
【发布时间】：2016-07-29 09:24:47
【问题描述】：

我有一个使用 cordova 和 InAppBrowser 构建的应用程序。我正在尝试显示“加载微调器”或“加载消息”（而不是在加载 inappbrowser 时显示空白页），我尝试这样做但它不起作用，这是我的 app.js 代码：

$(document).ready(function() {
	document.addEventListener("deviceready", onDeviceReady, false);
});

var ref;

function onDeviceReady() {		
     	
		    try {				
				ref = cordova.InAppBrowser.open('https://cordova.apache.org', '_blank', 'location=no');
				ref.addEventListener('loadstart', loadStartCallBack);
				ref.addEventListener("exit", onBackButton, false); 
			}
			catch(err) {
				alert("Plugin Error - " + err.message);
			}
			
			

		function onBackButton(e) {
			navigator.app.exitApp();
		}

		function loadStartCallBack() {

    $('#status-message').text("loading please wait ...");

}
}

这是我的 index.html 代码：

<!DOCTYPE html>

<html>
    <head>
        <meta name="format-detection" >
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>InApp Browser</title>
       
    </head>
    <body>      
		 <script type="text/javascript">
        navigator.splashscreen.show();
        </script>
		<div id="status-message"></div>
        <script type="text/javascript" src="js/jquery.js"></script>	
		<script type="text/javascript" src="cordova.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

【问题讨论】：

它没有在浏览器中显示结果请先构建然后在您的移动设备中测试或在模拟器中测试。
我已经构建并在模拟器中测试了它，但它没有显示结果

标签： javascript android jquery cordova inappbrowser

【解决方案1】：

loadstop callback 应该为您解决问题。

记得在browser.open方法中添加属性hidden=yes作为第三个参数，否则浏览器会一直可见，你不会看到加载信息：

cordova.InAppBrowser.open('https://cordova.apache.org', '_blank', 'location=no,hidden=yes');

最后你的代码应该是这样的：

<script>
var ref;

function onDeviceReady() {
    try {
        ref = cordova.InAppBrowser.open('https://cordova.apache.org', '_blank', 'location=no,hidden=yes');
        ref.addEventListener('loadstart', loadStartCallBack);
        ref.addEventListener("loadstop", loadEndCallback, false);
        ref.addEventListener("exit", onBackButton, false);
    } catch (err) {
        alert("Plugin Error - " + err.message);
    }

    function onBackButton(e) {
        navigator.app.exitApp();
    }

    function loadStartCallBack() {
        $('#status-message').text("loading please wait ...");
    }

    function loadEndCallback(){
        alert("Your page has been loaded, showing ...");
        $('#status-message').text("");
        ref.show();
    }
}

document.addEventListener("deviceready", onDeviceReady, false);
</script>

您在 chrome 中进行远程调试时是否遇到其他特定错误或其他问题？

【讨论】：

不，<div id="status-message"></div> 在我的 index.html 中，所以当 inappbrowser 加载 index.html 时， index.html 被隐藏了，该怎么办？？？？
:facepalm: 我也没看到。查看我的修复，您需要将 hidden=yes 属性添加到 InAppBrowser.open @Imen.A
@CarlosDelgado 我不想有警告框，我只想看到“正在加载，请稍候..”，所以我像这样编辑了 loadEndCallback 函数：@ 987654326@修改好不好？？？
@Imen.A 是的，这是你的项目 :)

【解决方案2】：

您无法显示加载消息，因为如果您打开 Inappbrowser，您的应用会进入后台，因此 div <div id="status-message"></div> 将被隐藏。

 var Ref;
   Ref = window.open('http://www.example.com', '_blank', 'location=no,toolbar=no');
             Ref.addEventListener('loadstart', inAppBrowserbLoadStart);
             Ref.addEventListener('loadstop', inAppBrowserbLoadStop);
             Ref.addEventListener('loaderror', inAppBrowserbLoadError);
             Ref.addEventListener('exit', inAppBrowserbClose);


       function inAppBrowserbLoadStart(event) {

             navigator.notification.activityStart("Please Wait", "Its loading....");
             alert(event.type + ' - ' + event.url);

        }

        function inAppBrowserbLoadStop(event) {
             navigator.notification.activityStop();
             alert(event.type + ' - ' + event.url);

        }

        function inAppBrowserbLoadError(event) {
             navigator.notification.activityStop();
             alert(event.type + ' - ' + event.message);
        }

        function inAppBrowserbClose(event) {

             Ref.removeEventListener('loadstart', iabLoadStart);
             Ref.removeEventListener('loadstop', iabLoadStop);
             Ref.removeEventListener('loaderror', iabLoadError);
             Ref.removeEventListener('exit', iabClose);
        }

【讨论】：

那我该怎么办？？