JavaScript/Bookmarklets

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 schemeEdit

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 usesEdit

Media controlsEdit

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 codeEdit

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 LinksEdit

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>

ExamplesEdit

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