Phonegap android: how to open external url from local html pages?

Question

I am trying to open en external url from a local html file. For example, i am using super.loadUrl("file:///android_asset/www/index.html"); to call local file and the application opens it in the browser provided by DroidGap. However, there is a problem with the external url. In index.html, i am trying to reach http://www.google.com via an image button and the device opens another browser to show www.google.com (in my device, chrome is opening to show the page www.google.com). I want to let DroidGap browser to open both external and local urls in DroidGap browser.

Answer 1

I have achieved this because I needed the same solution. I assume you already know how to load the local file but just in case ...

//By "SomeLocalFile.html" I mean an html file in the /www/ folder of the actual app installation **not** on the server
var ref = window.open('somelocalfile.html', '_blank', 'location=no');

First Add and event listener like this to the main js of your app from which you are calling var ref = window.open().

ref.addEventListener('loadstart', LoadStart); // in YourMainJs.js

Then create a local file called closeInAppBrowser.html some where in your /www/ folder it just so happens that mines is in /www/pages/

Now define the LoadStart function so that when the page starts to load LoadStart() will fire

//I use match(/[^/]+$/g) because I find that matching the file name is just easier than the path.
// This code is place in in YourMainJs.js
fileName = event.url.match(/[^/]+$/g);
if(fileName[0] == "closeInAppBrowser.html"){
    // alert("fun load stop runs");
    ref.close();
} 

Now in the SomeLocalFile.html that you are going to use window.open() with, place a link and js like this.

// in SomeLocalFile.html that was called via the window.open()
<a class="close">Close This Window Like A BOSS!</a>

$('.close').click(function(){
    //We use window location cause you can't navigate to any other local file just by using an href in an <a> tag
    //We aslo use ../../ because that is the correct path usage from within InAppBrowser to another local file
    window.location = '../../pages/closeInAppBrowser.html';   
});

Now when you click the link it will attempt to navigate to closeInAppBrowser.html this will trigger LoadStart() and it will check if the event.url file name matches "closeInAppBrowser.html" and if so it will close the window.

I have tested this and it works 100%. Let me know if you have any other questions

Answer 2

You want to use the ChildBrowser plugin to open the external web page. Then you want to set the ChildBrowser.onLocationChange property to your own function. Then when the person navigates away from the remote page you will be notified of the location change so you can then close the ChildBrowser and navigate to a new local page. You won't even need to touch the remote html page.

So to close the browser when the user navigates away from the remote page:

cb.onLocationChange = function(loc){
    console.log("location = " + loc);
    if (loc != "http://example.com") {
        cb.close();
    }
}; 

Answer 3

Actually there is no need to use child browser plugin, if you upgrade phonegap to 2.3.0 or above, so that you can use InAppBrowser

sample

  var ref = window.open(authorize_url, '_blank', 'location=no');
  ref.addEventListener('loadstart', function() {  me.locChanged(event.url,ref); });