JavaScript/Bookmarklets

From Wikibooks, open books for an open world
Jump to navigation Jump to search
Previous: Design mode Index Next: XMLHttpRequest

Bookmarklets are one line scripts stored in the URL field of a bookmark. Bookmarklets have been around for a long time so they will work in older browsers.

JavaScript URI scheme[edit | edit source]

You should be familiar with URL that start with schemes like http and ftp, e.g. http://en.wikibooks.org/. There is also the JavaScript scheme, which is used to start every bookmarklet.

JavaScript:alert('Hello, World!');

Example uses[edit | edit source]

Media controls[edit | edit source]

The values in these examples can be adapted as desired. One may replace video with audio where applicable, meaning where an <audio> tag is embedded.

Loop the video
javascript:document.getElementsByTagName("video")[0].loop=1;
javascript:document.getElementsByTagName("video")[0].loop=true; // also works

Can be switched off using 0 or false.

Jump to ten minutes (using multiplication)
javascript:document.getElementsByTagName("video")[0].currentTime=60*10;
Jump forward by one minute (sixty seconds)
javascript:document.getElementsByTagName("video")[0].currentTime+=60;
Jump back by half a minute (using division)
javascript:document.getElementsByTagName("video")[0].currentTime-=60/2;
Get duration of a video on the page in console
javascript:document.getElementsByTagName("video")[0].duration
Alert the duration
javascript:alert('This video is '+document.getElementsByTagName("video")[0].duration+' seconds long.')
Alert the playback time
javascript:alert('The current position of the video is at '+document.getElementsByTagName("video")[0].currentTime+' seconds.')
Set audio volume to 50%
javascript:document.getElementsByTagName("video")[0].volume=50/100
Mute audio
javascript:document.getElementsByTagName("video")[0].muted=1 // "true" works as well

Unmute using 0 or false.

Double the playback speed
javascript:document.getElementsByTagName("video")[0].playbackRate=2
Ask for playback speed
javascript:document.getElementsByTagName("video")[0].playbackRate= parseFloat( prompt("How fast should it play?") );

parseFloat is necessary to prevent setting the value to zero if the dialogue window is closed without user input.

Ask for playback position in seconds
javascript:document.getElementsByTagName("video")[0].currentTime=parseFloat( prompt("Jump to playback position in seconds:") );
Ask for playback position in minutes
javascript:document.getElementsByTagName("video")[0].currentTime=60*parseFloat( prompt("Jump to playback position in minutes:") );
Ask for playback position in percentage (0 to 100)
javascript:document.getElementsByTagName("video")[0].currentTime=document.getElementsByTagName("video")[0].duration/100*parseFloat( prompt("Jump to playback position in percents:") );

Using multiple lines of code[edit | edit source]

Since you cannot have line breaks in bookmarklets you must use a semicolon at the end of each code statement instead.

JavaScript:name=prompt('What is your name?'); alert('Hello, ' + name);

The JavaScript Protocol in Links[edit | edit source]

The JavaScript protocol can be used in links. This may be considered bad practice, as it prevents access for or confuses users who have disabled JavaScript. See Best Practices.

<a href="JavaScript:document.bgColor='#0000FF'">blue background</a>

Examples[edit | edit source]

A large quantity of links may be found on bookmarklets.com, which show a variety of features that can be performed within JavaScript.


Previous: Design mode Index Next: XMLHttpRequest