?>

iFrames and iPhones

Adding iframes to mobile apps is problematic

What about iframes and Mobile Devices?

In thinking about the utility of iframes in HTML5, I like the fact that you can use the iframe tag and a regular old a href target to bring up new materials without leaving the page. Further, this can be done without JavaScript or Ajax—not that I have anything against either; quite the opposite. It’s just that I don’t have to worry about users with their JavaScript turned off or doing a lot of extra work for a simple effect like a slide show. Also, if you have an iframe window, you don’t have to re-do the same page every time you want to link to a new image. You can take a quick look at the example I’ll be using and download the materials using the following two buttons:

So is putting a frame within a frame (so to speak) a good idea with a mobile device? What might be a useful application? What mobile browser works best? Let’s take a look.

Simple Slide Show

One of the simple and useful applications of an iframe is a slide show where the user clicks through a series of images. The images appear in the iframe as the user clicks links and the whole “site” is only a single page. Listings 1 and 2 show a simple example. Listing 1 is an external stylesheet and should be saved in the same folder as the HTML5 file.
Listing 1:iframe.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@charset "UTF-8";
/* CSS Document */
body {
	background-color:#cccccc;
	color:#333333;
	font-family:Verdana, Geneva, sans-serif;
}
a {
	text-decoration:none;
	color:#881111;
	font-size:11px;
	margin-left:10px;
}
h2 {
	background-color:#ffffff;
	color:#666666;
	font-family:"Arial Black", Gadget, sans-serif;
	margin-left:20px;
}
iframe {
	margin-left:20%;
}

Listing 2:iphoneiframe.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="iframe.css" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>iFrame and iPhones</title>
</head>
<body>
<article>
  <header>
    <h2>&nbsp;Acme Comuter Languages</h2>
  </header>
  <section>
    <iframe src="images/html5.png" width="150" height="150" frameborder="0" name="icon" seamless> </iframe>
  </section>
  <nav> 
    <div>
  	<a href="images/html5.png" target="icon">HTML5</a> | 
  	<a href="images/css3.png" target="icon">CSS3</a> | 
    <a href="images/js.png" target="icon">JavaScript</a> | 
    <a href="images/php.png" target="icon">PHP</a> | 
    <a href="images/asp.png" target="icon">ASP.NET</a>
    </div> 
   </nav>
</article>
</body>
</html>

As you can see the HTML5 is pretty straightforward, and while I had to keep experimenting with the CSS, I finally came to the realization that with different browsers, mobile and otherwise, no compromise in formatting made them all happy.

It’s the Mobile Browser; Not the Device

Using an iPhone as the test bench for mobile devices is not to suggest that it is somehow generic but rather it’s simply the one I happen to have. I’m wide open to Android and every other mobile device, and so if any of you test the HTML on your own non-iPhone device, I’d very much like to hear your results.

First off, the page was tested on the following mobile browsers:

  • Safari
  • Opera Mini
  • Google
  • Perfect Browser

The Safari browser worked fine as did the Perfect Browser. Figure 1 shows that these two browsers showed almost identical output:

Figure 1: Safari and Perfect Browsers

However, when it came to both the Opera and Google mobile browsers on the iPhone, things didn’t work out well at all. Both browsers treated the link to the iframe as a new page. Further, the formatting on the page was mangled by the Opera Mini. Figure 2 shows what happened on the Opera Mimi:

Figure 2: New page opens when iframe link tapped

As you can see, the navigation is no longer in a single line and when the user taps the link, only the graphic appears and on a different page. Further the seamless iframe is now a white window around the graphic. The Google mobile browser fared about the same except that there’s a special procedure that I have not yet fathomed to enter a simple URL.

Conclusions

As long as both the Opera Mini and Google browsers fail to work with iframes, I would not use iframes if the launch target is primarily mobile devices. The Opera Mini, in my opinion, is an excellent mobile browser for just about every Web-based operation. I like the way it handles Web pages. As a result, a lot of iPhone users are going to discover and use the Opera Mini in favor over Safari and other iPhone browsers. Likewise, Google is quite well-known, but their mobile app on the iPhone still has me scratching my head. As far as I can tell, you cannot enter a URL directly but instead must enter a search term. If you’re lucky you’ll find your own host with Google. (If I’m missing something with the Google mobile app, let me know because I’m a big Google fan.)

The Safari browser and the Perfect Browser seem equivalent as far as iframes are concerned, and I’m pretty sure that Safari is the most popular iPhone browser of all browsers. If you are comfortable with the idea that most iPhone users use Safari for the Web, you should be okay with iframes. Over time as mobile browsers implement the HTML5 standards, iframes should become a useful alternative to what amounts to page duplication. In the meantime, you’ll just need to duplicate a bunch of pages for a simple slide show if you want to be sure they can be viewed on all mobile browsers.

Share

1 Response to “iFrames and iPhones”


  • Great article. I think you’ve made some very valid points there. Leveraging Iframes you can load content on demand very easily as you’ve demonstrated which will help the initial load time of a page and you’re not having to pass the extra JS required to implement something in AJAX. Also the additional benefit of Iframes is the embedded content will be scrollable and not break out of your layout

Leave a Reply