traviblog

just some sort of lame blog

Using Javascript in your bookmarks (aka Bookmarklets)

It seems like I've been using this more and more. I forget what first inspired me to try pasting a url with 'javascript:' in it into a bookmark, but the first collection of Bookmarklets I found was this one. An easy bookmarklet for a beginner is a google search. The first step is to just bookmark the site. Then edit the bookmark and paste in a little bit of Javascript to make it more interactive:
javascript:document.location='http://www.google.com/search?q='+prompt('Google search for...');
(please forgive the 1 letter variables, and lack of proper spacing. it has to fit into a 1 line text input so there isn't really a lot of room)
I thought that was the coolest thing after I realized it worked. Then I thought it would be nice if it could read the existing search value from the querystring (in case i misspelled something, or wanted to change the search slightly). So I threw in some code to grab querystring variables:
javascript:s=location.search.substring(1,location.search.length).split('&');for(i=0;i<s.length;i++){t=s[i].split('=');if(t[0]=='q'){v=unescape(t[1]).split('+').join(' ');i=s.length++;}elsev='';}q=prompt('Google search for...',v);if(q!=null){window.location='http://google.com/search?q='+q;}else{void(null);}
What's nice about google, is that they use the same querystring variable across their sites. So the following bookmarklets would all work with each other:
javascript:s=location.search.substring(1,location.search.length).split('&');for(i=0;i<s.length;i++){t=s[i].split('=');if(t[0]=='q'){v=unescape(t[1]).split('+').join(' ');i=s.length++;}elsev='';}q=prompt('Google News search for...',v);if(q!=null){window.location='http://news.google.com/news?num=100&sa=G&scoring=d&q='+q;}else{void(null);}
javascript:s=location.search.substring(1,location.search.length).split('&');for(i=0;i<s.length;i++){t=s[i].split('=');if(t[0]=='q'){v=unescape(t[1]).split('+').join(' ');i=s.length++;}elsev='';}q=prompt('Froogle search for...',v);if(q!=null){window.location='http://froogle.google.com/froogle?btnG=Froogle+Search&q='+q;}else{void(null);}
To see what I'm talking about, perform a search on the different bookmarklets and you'll see how your search phrase gets passed into each one automatically, even though you are searching on different sites. What's even cooler is when other sites happen to use 'q' as their search variable:
javascript: s=location.search.substring(1,location.search.length).split('&');for (i=0;i<s.length;i++){t = s[i].split('='); if (t[0] == 'q'){ v=unescape(t[1]).split('+').join(' ');i=s.length++;} else v='';} q=prompt('BizRate search for...',v); if (q != null) {window.location='http://www.bizrate.com/marketplace/search/search.xpml?de_id=200&search_box=1&cat_id=1&SEARCH_GO.x=14&SEARCH_GO.y=3&SEARCH_GO=Submit&keyword=' + q + '&q=' + q;} else {void(null);}
javascript: s=location.search.substring(1,location.search.length).split('&');for (i=0;i<s.length;i++){t = s[i].split('='); if (t[0] == 'q'){ v=unescape(t[1]).split('+').join(' ');i=s.length++;} else v='';} q=prompt('Dictionary search for...',v); if (q != null) {window.location='http://dictionary.reference.com/search?q=' + q;} else {void(null);}
Where I've found this most useful lately is searching for houses. It's a real time saver when you have to deal with poorly designed forms. This example searches Nothnagle's site for a particular zip code (the price is hard-coded to 65000-95000 since Nothnagle doesn't offer those prices in their form, and I have other criteria thrown in there as well):
javascript:s=location.search.substring(1,location.search.length).split('&');for (i=0;i<s.length;i++){t = s[i].split('='); if (t[0] == 'PRM_ZipCode'){ v=unescape(t[1]).split('+').join(' ');i=s.length++;} else v='';} q=prompt('Zip',v); if (q != null) {window.location='http://www.nothnagle.com/property/proplist.asp?VAR_SearchType=listmailer&VAR_AllowSaveSearch=0&PRM_ZipCode='+q+'&PRM_Maximum_Price=95000&PRM_Minimum_Baths=1&PRM_Minimum_Beds=3&PRM_Minimum_Price=65000&VAR_PropertyCity=&VAR_PageSize=50';} else {void(null);}
After getting frustrated with the limited information for particular houses on Nothnagle's site, I made one to pass the MLS number (MLS is the unique identifier given to houses that are put up for sale) over to Realtor.com's site:
javascript:s=location.search.substring(1,location.search.length).split('&');for(i=0;i<s.length;i++){t=s[i].split('=');if(t[0]=='PRM_MLSNumber'){ v=unescape(t[1]).split('+').join(' ');i=s.length++;}else v='';}q=prompt('MLS',v);if(q!=null){window.location='http://www.realtor.com/FindHome/Transition.asp?st=&mnprice=0&mxprice=99999999&mnbed=0&mnbath=0&mnsqft=0&exft=0&exft=0&exft=0&exft=0&frm=bymlsid&pgnum=1&mls=xmls&lnksrc=&js=off&fid=so&vtsort=&ss_aywr=&optInCheckbox=&poe=realtor&ct=&zp=&typ=1&typ=3&typ=7&typ=2&typ=6&typ=4&typ=5&lid='+q;}else{void(null);}
This has been a great timesaver for me. The basic format I use is this:
javascript: s=location.search.substring(1,location.search.length).split('&');for (i=0;i<s.length;i++){t = s[i].split('='); if (t[0] == 'q [this is the querystring parameter to look for] '){ v=unescape(t[1]).split('+').join(' ');i=s.length++;} else v='';} q=prompt('Google search for... [this is the question in the prompt] ',v); if (q != null) {window.location='http://google.com/search?q= [this is the first half of the URL, it MUST end in the querystring variable followed immediately by '='] ' + q + '& [any other url stuff goes here, it should be preceded by '&'] ';} else {void(null);}
It's pretty easy once you get the hang of it. If you want to use it on a form that POSTs (instead of GETs) you can try using the Web Developer toolbar in your real browser. It has a nice feature that converts POST to GET. Then you can bookmark the resulting URL. If that doesn't work you could try dynamically writing out a form with all the necessary variables/inputs and a POST action then submitting it all with javascript. I've never tried it, but it could work.

If you don't use a real browser and you need a javascript debugger, you can try the following bookmarklet I made:
javascript:document.writeln('<html><body><form><textarea style="width:100%;height:400px;">// javascript goes here</textarea><input type="button" value="eval" onclick="javascript:eval(this.form.elements[0].value);" /></form></body></html>');
I started working on a vbscript one, but it isn't as easy since vbscript uses CRLF as a statement terminator. I really haven't had the need for it so I just gave up.
(I used this JavaScript code highlighter for this post, anyone know of a better one?)
Comments

Archived Comments

namedatecomment
joshwa re: getting POST forms to work in bookmarklets: I tried this for the DHL tracking form in firefox and it worked:

javascript:document.writeln('<html><body><form name="frmTrackByNbr" action="http://track.dhl-usa.com/TrackByNbr.asp" method="post"><input name="txtTrackNbrs" value="YOUR_NUMBER_HERE"><input type="hidden" name="hdnTrackMode" value="nbr"><input type="hidden" name="hdnPostType" value="init"><input type="hidden" name="hdnRefPage" value="0"></form></body></html>');document.frmTrackByNbr.submit();
travis Pretty sweet. That's a creative use of a bookmarklet. You could even replace value="YOUR_NUMBER_HERE"> with value="' + prompt('Tracking #...') + '"> - that would allow you to just paste your tracking # into the JS popup instead of changing the bookmark each time.
Bendwill Good suggestions, but I have a slightly different problem ...
I am using the following Javascript to popup a blank Google search window from my personal toolbar:
javascript:void(window.open(%22http://www.google.com/%22,%22GOOGLE%22,%22toolbar,location,directories,status,menubar,scrollbars,resizable,left=0,top=0,height=806,width=800%22))

This works beautifully, with the window positioned and sized just where I want, EXCEPT that I can't figure a way for this window to open IN FRONT of my regular browser window; it insists on opening BEHIND my regular window, I can't use the window.focus command because I don't own the popped up window coding to insert this into.
Any suggestions?
travis I tried this in IE and it worked fine:

javascript:w=window.open(%22http://www.google.com/%22,%22GOOGLE%22,%22toolbar,location,directories,status,menubar,scrollbars,resizable,left=0,top=0,height=806,width=800%22);w.focus();

It didn't grab the focus in Firefox because I have a setting that specifically disables that functionality.
m You don't need a prompt in Firefox. Instead, use a keyword.
I bookmarked google with the keyword "?" and added javascript to escape the string so i could search for quoted criteria.

now i can type:
? "buck fush"
in the address bar and google from there.

The url is:

javascript:document.location='http://www.google.com/search?&q='+escape('%s');
travis pretty sweet M, I didn't think of that.
m Thanks. Just using what's already there. (the question mark was someone elses idea, i can't remember where i read it first)
If you want to add it to your tutorial i won't mind if you remove my comment.

comments powered by Disqus