Jonathan Stark's Phone Gap tutorial - Ch03 - part 2

Today we continue to walk through Chapter 3 of Jonathan Stark's tutorial on creating iPhone apps without objective C.

Picking up where we left off, the next step is to only "hijack" links to your own site. If there's a link to an different site, you want to allow it to work normally. This is done by adding these lines to the hijack_links method:

var url = e.target.href;
if (url.match(/jonathanstark.com/)) {
//...execute the preventDefault and the load paghe

So now the method looks like something like this:

function hijackLinks() {
$('#container a').click(function(e){
var url = e.target.href;
if (url.match(/kanjisoft.com/)) {
e.preventDefault();
loadPage(e.target.href);
}
});
$('h1').html(title);
$('h2').remove();
$('#progress').remove();
}

So, to test this, we can add some external links and make sure they work. Let's modify lines development.html to include some links in the content section:

<div id="content">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>

<h2>Development</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

This get the following page:



If you click on the links, it just takes you to the respective page on your site. Now, let's change the "blog" link to be a google link:

<li><a href="http://www.google.com">Google</a></li>

So, it looks like this:





And if we click on it, we get the normal Google page:





That's it for now. We'll keep on going with chapter three in the next post.