Close the Inappbrowser Phonegap

Asked

Viewed 1,169 times

-1

I can open the URL inside the Inappbrowser, but when clicking the device to return, I should close the window, but it does not close. That’s because I took the full example of the Phonegap website and didn’t change it at all. How do I end it, either by clicking the back button of the device or otherwise?

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

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

1 answer

1


There are several ways to solve this problem.

According to the documentation when using the window.open you receive an object from the created window. And in this object we have the method close. Then 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 back button of Android.

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 app. This is done by simply creating buttons and using Javascript to toggle the visibility of the elements and create the page.

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

In an application I’m developing I created something in this style, I created a single HTML page with all the predefined content. When presenting the Splashscreen upload all the content of the application through JSONP and using a small Javascript template engine create the content of the pages.
As a result, the app has become extremely fast, easy to develop and at no point does the screen turn white waiting for some content to load. Since with the use of callbacks I can present content to the user as soon as it becomes available.

Browser other questions tagged apache-cordova

You are not signed in. Login or sign up in order to post.