Tài liệu Lập trình iphone chuyên nghiệp part 20 pdf

Packaging Apps as
Bookmarks: Bookmarklets
and Data URLs
Because iPhone and iPod touch applications function inside of the Mobile Safari environment,
there are two seemingly obvious restrictions for the Web developer: You must live with the built - in
capabilities of the Mobile Safari browser; and you need a constant Wi - Fi (or, for iPhone, EDGE)
connection in order to run any application.
The truth is that you can get around these limitations by taking advantage of two lesser - known
technologies — bookmarklets and data URLs. These technologies have actually been around for
years, but they have tended to exist on the periphery of mainstream Web development. However,
developers are now reexamining these two developer tools to maximize the potential of the iPhone
application platform.
Bookmarklets (short for bookmark applets ) are mini JavaScript “ applets ” that can be stored as a
bookmark inside of Safari. A data URL is a technique for storing an entire Web page or application
(pages, styles, images, data, and scripts) inside of a single URL, which can then be saved as an
iPhone/iPod touch Bookmark. This application - in - a - bookmark can then be accessed in
offline mode.
Bookmarklets
A bookmarklet is JavaScript stored as a URL and saved as a bookmark in the browser. It is typically
used as a one - click applet that performs a very specific task or performs an action on the current
Web page. A bookmarklet uses the
javascript:
protocol followed by script code. For instance,
here ’ s the simplest of examples:

javascript:alert(‘iPhone’)
c10.indd 221c10.indd 221 12/7/07 2:56:56 PM12/7/07 2:56:56 PM
Chapter 10: Packaging Apps as Bookmarks: Bookmarklets and Data URLs
222
Because the scripting code for a bookmarklet is housed inside of a URL, the script must be condensed
into one long string of code. Therefore, to enter multiple statements, separate each line with a semicolon:

javascript:alert(‘Bookmarklet 1’);alert(‘Bookmarklet 2’)
As you can see, there are spaces inside each of the strings. You can either substitute
%20
for a blank space
or let Safari do the conversion for you.
If the script returns a value, then it should be enclosed inside of
void()
to ensure that the JavaScript
code runs as expected. For example, the following Search Wikipedia bookmarklet displays a JavaScript
prompt dialog box (see Figure 10 - 1 ), and then calls a Wikipedia search URL using the user ’ s value as the
search term:

javascript:t=prompt(‘Search
Wikipedia:’,getSelection());if(t) void (location.href=’ />.phtml?search=’+escape(t))
Figure 10-1: Search Wikipedia bookmarklet
Here ’ s a second example that provides a front - end onto Google ’ s define service:

javascript:d=prompt(‘Define:’,getSelection());if(d)void(location.href=’http://
www.google.com/search?q=define:’+escape(d))
c10.indd 222c10.indd 222 12/7/07 2:56:56 PM12/7/07 2:56:56 PM
Chapter 10: Packaging Apps as Bookmarks: Bookmarklets and Data URLs
223
Adding a Bookmarklet to Mobile Safari
Bookmarklets are normally added in a standard browser through a drag - and - drop action. However,
because that user input is not available in Mobile Safari, you need to add the bookmarklet through the
following process:
1.
On your main computer, create your bookmarklet script and test it by pasting it into the URL
box of Safari.

2.
Once the functionality works as expected, drag the
javascript:
URL onto your Bookmarks
bar in Safari. If you are going to have a set of bookmarklets, you may wish to create a special
Bookmarklets folder to store these scripts.

Or, if your bookmarklet is contained within the
href
of an
a
link, then drag the link onto the
Bookmarks bar instead.
3.
Synch the bookmarks of your iPhone and main computer through iTunes.
4.
Access the bookmarklet in the Bookmarks inside Mobile Safari (see Figure 10 - 2 ).
Figure 10-2: Accessing a bookmarklet from iPhone
c10.indd 223c10.indd 223 12/7/07 2:56:57 PM12/7/07 2:56:57 PM
Chapter 10: Packaging Apps as Bookmarks: Bookmarklets and Data URLs
224
Alternatively, you can add a bookmarklet directly into Mobile Safari ’ s Bookmarks by creating a link to
any normal Web page, and then editing the URL of the bookmark.
Exploring How Bookmarklets Can Be Used
While bookmarklets can be used for these sorts of general purposes, their real usefulness to the iPhone
application developer is turning JavaScript into a macro language for Mobile Safari to extend the
functionality of the browser. For example, Mobile Safari always opens normal links in the existing
window, replacing the existing page. Richard Herrera from doctyper.com wrote a bookmarklet that
transforms the links of a page and forces them to open in a new tab. Here is the script, which is tricky to
read because it is contained within a one - line, encoded URL:

javascript:(function(){var%20a=document.getElementsByTagName(‘a’);for(var%20i=0,j=a
.length;i%3Cj;i++){a[i].setAttribute(‘target’,’_blank’);var%20img=document.createEl
ement(‘img’);img.setAttribute(‘class’,%20’new-
window’);img.setAttribute(‘src’,’data:image/gif;base64,’+’R0lGODlhEAAMALMLAL66tBISE
jExMdTQyBoaGjs7OyUlJWZmZgAAAMzMzP///////wAAAAAAAAAAAAAA’+’ACH5BAEAAAsALAAAAAAQAAwAA
AQ/cMlZqr2Tps13yVJBjOT4gYairqohCTDMsu4iHHgwr7UA/LqdopZS’+’DBBIpGG5lBQH0GgtU9xNJ9XZ1
cnsNicRADs=’);img.setAttribute(‘style’,’width:16px!important;height:12px!important;
border:none!important;’);a[i].appendChild(img);}})();
At the time of this writing, Windows Safari has several issues working with bookmarklets. In order
for this bookmarklet to work on an iPhone synched with Windows Safari, it must be completely
URI encoded:

javascript:(function()%7Bvar%20a%3Ddocument.getElementsByTagName(‘a’)%3Bfor(var%20i
%3D0%2Cj%3Da.length%3Bi%3Cj%3Bi%2B%2B)%7Ba%5Bi%5D.setAttribute(‘target’%2C’_blank’)
%3Bvar%20img%3Ddocument.createElement(‘img’)%3Bimg.setAttribute(‘class’%2C’new-
window’)%3Bimg.setAttribute(‘src’%2C’data%3Aimage%2Fgif%3Bbase64%2C’%2B’R0lGODlhEAA
MALMLAL66tBISEjExMdTQyBoaGjs7OyUlJWZmZgAAAMzMzP%2F%2F%2F%2F%2F%2F%2FwAAAAAAAAAAAAAA
’%2B’ACH5BAEAAAsALAAAAAAQAAwAAAQ%2FcMlZqr2Tps13yVJBjOT4gYairqohCTDMsu4iHHgwr7UA%2FL
qdopZS’%2B’DBBIpGG5lBQH0GgtU9xNJ9XZ1cnsNicRADs%3D’)%3Bimg.setAttribute(‘style’%2C’w
idth%3A16px!important%3Bheight%3A12px!important%3Bborder%3Anone!important%3B’)%3Ba%
5Bi%5D.appendChild(img)%3B%7D%7D)()%3B
Note that while this URI encoded script works on iPhone, it (along with other iPhone-specific bookmark-
lets in this chapter) still will not work on Windows Safari. Additionally, when you synch with Windows
Safari, iPhone bookmarklets can occasionally behave unexpectedly.
An iPhone user can then use this self-contained “applet” on any page in which they wish to transform
the links. Notice that the image itself is encoded in a data URL, so that the script is not dependent on any
external files.
While the entire script needs to be condensed into a single string of commands, Safari is actually
smart enough to convert the hard breaks for you when a multilined script is pasted into the URL box.

Just make sure each statement is separated by a semicolon. Therefore, the following code, which is much
easier to work with and debug, would still execute properly when pasted directly into the URL box:
c10.indd 224c10.indd 224 12/7/07 2:56:57 PM12/7/07 2:56:57 PM
Chapter 10: Packaging Apps as Bookmarks: Bookmarklets and Data URLs
225
javascript:(
function(){
var a=document.getElementsByTagName(‘a’);
for(var i=0,j=a.length;i%3Cj;i++) {
a[i].setAttribute(‘target’,’_blank’);
var img=document.createElement(‘img’);
img.setAttribute(‘class’,’new-window’);
img.setAttribute(‘src’,’data:image/gif;base64,’+’R0lGODlhEAAMALMLAL66tBISEjExMdTQy
BoaGjs7OyUlJWZmZgAAAMzMzP///////wAAAAAAAAAAAAAA’+’ACH5BAEAAAsALAAAAAAQAAwAAAQ/cMlZq
r2Tps13yVJBjOT4gYairqohCTDMsu4iHHgwr7UA/LqdopZS’+’DBBIpGG5lBQH0GgtU9xNJ9XZ1cnsNicRA
Ds=’);
img.setAttribute(‘style’,’width:16px!important;
height:12px!important;
border:none!important;’);
a[i].appendChild(img);
}
})();
Bookmarklets can be handy developer tools to assist in testing and debugging on iPhone. For example,
the following bookmarklet, based on a script created at
iPhoneWebDev.com
, gives you View Source
functionality (see Figure 10-3 ) on iPhone itself:
javascript:
var sourceWindow = window.open(“about:blank”);
var newDoc = sourceWindow.document;

newDoc.open();
newDoc.write(
“<html><head><title>Source of “ + document.location.href +
“</title><meta name=\”viewport\” id=\”viewport\” content=\”initial-scale=1.0;” +
“user-scalable=0;maximum-scale=0.6667;width=480\”/><script>function do_onload()” +
“{setTimeout(function(){window.scrollTo(0,1);},100);}if(navigator.userAgent.indexOf
” + “(\”iPhone\”)!=-
1)window.onload=do_onload;</script></head><body></body></html>”);
newDoc.close();
var pre = newDoc.body.appendChild(newDoc.createElement(“pre”)); pre.
appendChild(newDoc.createTextNode(document.documentElement.innerHTML));
If your iPhone is synching with Windows, you would want to fully URI encode the script:
javascript:var%20sourceWindow%3Dwindow.open%28%27about%3Ablank%27%29%3B%0Avar%20new
Doc%3DsourceWindow.document%3B%0AnewDoc.open%28%29%3B%0AnewDoc.write%28%27%3Chtml%3
E%3Chead%3E%3Ctitle%3ESource%20of%20%27%2Bdocument.location.href%2B%27%3C/title%3E%
3Cmeta%20name%3D%22viewport%22%20id%3D%22viewport%22%20content%3D%22initial-
scale%3D1.0%3B%20user-scalable%3D0%3B%20maximum-
scale%3D0.6667%3B%20width%3D480%22/%3E%3Cscript%3Efunction%20do_onload%28%29%7BsetT
imeout%28function%28%29%7Bwindow.scrollTo%280,1%29%3B%7D,100%29%3B%7Dif%28navigator
.userAgent.indexOf%28%22iPhone%22%29!%3D-
1%29window.onload%3Ddo_onload%3B%3C/script%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/ht
ml%3E%27%29%3B%0AnewDoc.close%28%29%3B%0Avar%20pre%3DnewDoc.body.appendChild%28newD
oc.createElement%28%22pre%22%29%29%3B%0Apre.appendChild%28newDoc.createTextNode%28d
ocument.documentElement.innerHTML%29%29%3B
c10.indd 225c10.indd 225 12/7/07 2:56:57 PM12/7/07 2:56:57 PM