Search code examples
javascriptandroidjquerycordovainappbrowser

(cordova) (inappbrowser) Let users know that you're getting their page ready

I've an app built with cordova and InAppBrowser. I'm trying to show a "loading spinner " or a "loading message" (instead of having a blank page while the inappbrowser is loading) , I tried to do it but it's not working , here is my app.js code:

$(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 ...");

}
}

And here is my index.html code :

<!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>

Solution

  • The loadstop callback should do the trick for you.

    Remember to add the property hidden=yes as third parameter in the browser.open method, otherwise the browser will be always visible and you won't see the loading message :

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

    Finally your code should look like :

    <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>

    Do you get another specific error or something with the remote debbuging in chrome?