Information Technology Reference
In-Depth Information
Using JavaScript Agent Detection to Show Different Content to
Different Platforms
One natural progression of a single-platform developer (i.e., someone who writes
applications for Android, or iOS, or just one operating system) is to jump to different
platforms. Web apps are great for this, in that they largely can be coded once and
'ported' over to other similar architectures with ease. However, to avoid derivative
versions that can become a nightmare (i.e., an Android and an iOS version, requiring you
to make additions separately to both versions), it might be easier just to have one piece
of code that can change based on where it's being run. In this example, we'll show you
how to implement the JavaScript code from Listing 6-2 in the preceding section into a
Web App that will show different content depending on where it is running.
We'll also give you a taste of something you'll see quite a lot of in the next chapter,
jQuery Mobile, by using it as the 'framework' for this application. If you like the look of
the next few screens, then you'll enjoy reading Chapter 7!
Let's first start by discussing our overall goal: To display the appropriate link to
download an application. In Android, we want the link to go to the Android Market (or
perhaps to one of the new Android app stores that have opened, such as Amazon's). In
iOS, we want the link to go to the Apple App Store. We'd also like to show the
appropriate graphic. Let's start by building a simple page that shows the Android link.
We first need to grab the graphic (Available on the Android Branding page,
Listing 6-3.
Download our App HTML Page
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Download our App</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$( '#aboutPage' ).live( 'pageinit',function(event){
if (navigator.userAgent.match(/android/i)) {
document.getElementById("androiddiv").style.display = "block";
}
if (navigator.userAgent.match(/iPhone/i)) {
document.getElementById("applediv").style.display = "block";
}
});
