PhoneGap and External URL

Lately I was working on a project based on PhoneGap. As you know PhoneGap utilises the HTML5 while taking advantage of the native features such as camera, accelerometer etc.

The client came up with a odd idea, that when user clicks on an external URL, it should open in the browser else it should work inside the Application wrapper (WebView). You may think it’ll work fine, what is the big deal. But then the problem comes when you try to build the project in the PhoneGap build.

Each platform iOS and Android has their own set of rules when to and when not to open the urls in browser. If everything works fine in Android then it’ll go ugly on iOS. You can read about it more here.

As the result we decided to use InAppBrowser. iOS users are much familier with in app browser. Most of the apps open their external links without leaving the website. Linked in App is a good example.


So as per documentation we can easily say this is how we open a url in InAppBrowser, but then we have two type of URLS. Local urls and the external urls that should be opened in InAppBrowser.

So decided to catch the click event for each anchor tag and check the “target” value of the tag. If it is _blank then we’ll open it in InAppBrowser.

$("a").bind('click', function(e){
	var href = $(this).attr('href');
	var target = $(this).attr('target');
	if(target =='_blank'){
		var ref =, '_blank', 'location=yes');
		return false;

I hope the code above is self explanatory. Good luck guys.

Did you enjoy this article?
Signup today and receive free updates straight in your inbox. We will never share or sell your email address.

Leave a Reply