Question

Background:
The Cordova phonegap 2.2 application running on Android allows listening to the backbutton event

document.addEventListener("backbutton", function(e){ history.back();}

The google maps api V3 creates the map with the Google logo linking to a Google maps webpage in the left lower corner and a clickable license link in the right lower corner. The logo or the terms of service links have no specific id/selector.

Problem
When clicking one of the links the webpage is redirected to a Google webpage with: target:_blank, the website then opens in the same window as the Cordava application, but the back button functionality is lost because the webpage contains its own Javascript.

Is it possible to inject some code upon loading a webpage?

One solution could possibly be to open the links externally with:

navigator.app.loadUrl([href here], { openExternal:true } );

but then again there is still the problem of lack of selectors.

Update: When clicking the button while on the license page or in Google maps I get the following error message in logcat: 11-13 16:20:30.500: E/Web Console(31508): Uncaught ReferenceError: cordova is not defined:1

Answer 1

Here is one way to intersect the google maps links.

Assuming you have jquery available, you can include this method in your script:

function directUrlToExternalBrowser(urlPattern) {
  var pattern = "a[href^='"+urlPattern+"']";//all urls startting with urlPattern
  $(pattern).live('click', function(e){
      e.preventDefault();
      navigator.app.loadUrl($(pattern).attr("href"), {openExternal: true});
  });
}

Then you can direct the clicks to the phonegap api by the following lines:

directUrlToExternalBrowser("http://maps.google.com/maps");
directUrlToExternalBrowser("http://www.google.com/intl");