Pages

How To Make a Bookmarklet

Hello friends,
Today I am going to tell you about bookmarklet.

What Is bookmarklet ?

Before knowing about bookmarklet let's see What is bookmark/favourite?

As we know that  bookmarks are the saved linked of a web page that has been added to a list of saved link. we can save the link of a web page as a bookmark/favorite just click on the Bookmarks/favourite menu of the browser and say bookmark this page/add to Favourites.

we can give it a name. so next time when we clicked on it, it will  redirect to original web page. its just like to shortcut in Windows and soft link on Linux for retrieving the document.

Regular Bookamrks are the just  location to visit like http://www.facebook.com.

Bookmarklet are the javascript code that runs on the current web page to extend the functionality of browser and they marked by javascript:  instead of http://.  For instance, A bookmarklet can allow user to select the text (ex Punjabi text) from current web page and click on bookmarklet and get a translated text(Hindi text) .
Bookmarklet are the browser independent we can use same Bookmarklet in different Browser.
To add bookmarklet in different Browser--------

Firefox user just drag and drop Bookmarklet link into bookmarks toolbar .

IE user right click on the Bookmarklet link and add favourite.

chrome user just drag and drop Bookmarklet into bookmark bar.

How to create a Bookmarklet ?

There are some easy steps to create bookmarklet --

1. Create an HTML file and inside "<body >" tag place <a> tag and write your JavaScript code

sample example:

A simple Bookmarklet looks like this:

<a href="javascript:alert('hi');">sampark</a>

2. Open your page in the browser  and just drag and drop this Bookmarklet link on Bookmarks toolbar.

Now your Bookmarklet is the part of your browser and script behind it run on current web page.

A template for creating bookmarklets

Below are two basic outlines for creating your own bookmarklet. The main choice you will have to make is whether to disable caching for your JavaScript file.

Template 1: caching

Template one does not prevent caching. This means your script will be saved to the user’s computer for some period of time. It will eventually be reloaded, but you have no way of knowing how soon. Here is the template:
javascript:(function(){
 new_script=document.createElement('SCRIPT');
 new_script.type='text/javascript';
 new_script.src='http://www.your-site.com/script.js?';
 document.getElementsByTagName('head')[0].appendChild(new_script);
})();

Template 2: caching disabled

This alternative includes a handy parameter to prevent caching of your script. This is ideal for development because every time you use the link, it will run the latest version on the server.

javascript:(function(){ new_script=document.createElement('SCRIPT'); new_script.type='text/javascript'; new_script.src='http://www.your-site.com/script.js?x=' +(Math.random()); document.getElementsByTagName('head')[0].appendChild(new_script); })(); The cache is disabled simply by adding a random query string to the end of the script tag.

This makes the browser load the script each time it is used.
The post will continue.

Dynamic JavaScript Bookmarklet

No comments:

Post a Comment