Close InAppBrowser Phonegap

-1

I can open the URL inside the InAppBrowser, but when I click the device button to return, it should close the window, but it will not close. That's because I took the complete example of the Phonegap site and did not change it at all. How do I close it, either by clicking the back button of the device or otherwise?

Below is the full code, taken from the Phonegap site.

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.addEventListener Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
         var ref = window.open('http://apache.org', '_blank', 'location=yes');
         ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
         ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
         ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
         ref.addEventListener('exit', function(event) { alert(event.type); });
    }

    </script>
  </head>
  <body>
  </body>
</html>
    
asked by anonymous 29.04.2014 / 19:26

1 answer

1

There are several ways to solve this problem.

According to the documentation when using window.open you receive an object from the created window. And in this object we have the close method. So just call the method to close the window.

ref.close();

The problem is knowing when to call this method. For this we can use a eventListener of the Android back button.

document.addEventListener("backbutton", ref.close, false);

This should solve your problem, but there is an alternative that can be used and present a better result.

You can use jQuery or some framework to manipulate the DOM. This way your entire application can run on one page. Basically you create all the content in divs with display:none , which makes it invisible at the beginning of the application. This is done by creating buttons and using JavaScript to toggle the visibility of the elements and create the page.

It is worth mentioning that with this freedom is immense, in case you need some external content, just request through AJAX.

In an application I'm developing I created something like this, I created a single HTML page with all the pre-defined content. When submitting the SplashScreen I load all the content of the application through JSONP and using a small template engine in JavaScript I create the content of the pages. As a result, the application has become extremely fast, easy to develop and at no time does the screen become white waiting for some content to load. Since using callbacks I can present content to the user as soon as it becomes available.

    
29.05.2014 / 20:41