Question

In my app I use Cordova's InAppBrowser to open an external page. I attach a polling event to look for a localStorage entry. When the entry is 'seen' the InAppBrowser should close but that's not happening.

This is all in the Intel XDK by the way.

What does happen (refer to code below) is that the Game1.html (external page) does load and appear. When I click the button that fires the 'submit' function I do see the "Done!" alert from the Game.html page but I don't see the "Caught" alert from the event listener.

Update: I have noticed that when the remote page is loaded and displayed that there is a 'back' icon in the top left corner. I didn't expect this with the Cordova InAppBrowser. However, in the documentation for the device.showRemoteSiteExt (intel bridge api) it describes this icon. Is it possible window.show is getting overridden with device.showRemoteSiteExt?

The primary reason I'd like to use this method is to allow the Game1.html to generate data that gets stored to localCache. Then the polling process can pick up that data and relay it to the server.

Function in index.html:

function showGamesPage() {
    var win = window.open("http://localhost:53841/Game1.html", "_blank", "EnableViewPortScale=yes");
        win.addEventListener("loadstop", function() {
            win.executeScript({ code: "localStorage.setItem('name', '' );" });
            var loop = setInterval(function() {
                win.executeScript({ code: "localStorage.getItem( 'name' );"},
                    function(values) {
                        var name = values[0];
                        if (name) {
                            clearInterval(loop);
                            alert("Caught!");
                            win.close();
                        }
                    }
                );
            });
        });
    }

And here's the function that fires in Game1.html when I click a button:

function submit() {
    localStorage.setItem("name", "john");
    alert("Done!");
}

Anybody know why this might be? Is this just a hole in the XDK?

Thanks in advance.

Was it helpful?

Solution

Your code worked perfectly on iPhone using Intel XDK App Preview, have you added <script src="cordova.js"></script> to the index.html.

However in the XDK emulator it does not work, localStorage.setItem() does not seem run in simulated inappbrowser.

But the same code on iPhone works, here is the code:

<!DOCTYPE html>
<html>
<head>
    <title>App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="cordova.js"></script>
    <script>
    function showGamesPage() {
        var win = window.open("https://c9.io/.../test.html", "_blank", "EnableViewPortScale=yes");
        win.addEventListener("loadstop", function() {
            win.executeScript({ code: "localStorage.setItem('name', '' );" });
            var loop = setInterval(function() {
                win.executeScript({ code: "localStorage.getItem( 'name' );"},
                    function(values) {
                        var name = values[0];
                        if (name) {
                            clearInterval(loop);
                            alert("Caught!");
                            win.close();
                        }
                    }
                );
            });
        });
    }
    </script>  
    <style>
body{background-color: white}    
    </style>    
</head>
<body>
<h1 onclick="showGamesPage()">Open</h1>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top