Last active
May 5, 2024 21:07
jQuery Bookmarklet Template w/ Async Loading
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// You create your bookmarklet by instantiating | |
// a new Bookmarklet function, then pass in the options like so. | |
// This example checks to see if the var is already defined, and makes | |
// sure not to overwrite it. This could happen if the user clicks on | |
// the bookmarklet more than once. | |
MyBookmarklet = MyBookmarklet || (MyBookmarklet = new Bookmarklet({ | |
// debug: true, // use debug to bust the cache on your resources | |
css: ['/my/style.css'], | |
js: [], | |
// jqpath: '/my/jquery.js', // defaults to google cdn-hosted jquery | |
ready: function(base) { // use base to expose a public method | |
base.init = function(){ | |
// doStuff(); | |
} | |
base.init(); | |
} | |
})); | |
/** | |
* jQuery Bookmarklet - version 2.0 | |
* Author(s): Brett Barros, Paul Irish, Jon Jaques | |
* | |
* Original Source: http://latentmotion.com/how-to-create-a-jquery-bookmarklet/ | |
* Modified Source: https://gist.github.com/2897748 | |
*/ | |
function Bookmarklet(options){ | |
// Avoid confusion when setting | |
// public methods. | |
var self = this; | |
// Merges objects. B overwrites A. | |
function extend(a, b){ | |
var c = {}; | |
for (var key in a) { c[key] = a[key]; } | |
for (var key in b) { c[key] = b[key]; } | |
return c; | |
} | |
function loadCSS(sheets) { | |
// Synchronous loop for css files | |
$.each(sheets, function(i, sheet){ | |
$('<link>').attr({ | |
href: (sheet + cachebuster), | |
rel: 'stylesheet' | |
}).prependTo('body'); | |
}); | |
} | |
function loadJS(scripts){ | |
// Check if we've processed all | |
// of the JS files (or if there are none). | |
if (scripts.length === 0) { | |
o.ready(self); | |
return; | |
} | |
// Load the first js file in the array. | |
$.getScript(scripts[0] + cachebuster, function(){ | |
// asyncronous recursion, courtesy Paul Irish. | |
loadJS(scripts.slice(1)); | |
}); | |
} | |
function init(callback) { | |
if(!window.jQuery) { | |
// Create jQuery script element. | |
var script = document.createElement('script'); | |
script.type = 'text/javascript'; | |
script.src = o.jqpath; | |
document.body.appendChild(script); | |
// exit on jQuery load. | |
script.onload = function(){ callback(); }; | |
script.onreadystatechange = function() { | |
if (this.readyState == 'complete') callback(); | |
} | |
} else { | |
callback(); | |
} | |
} | |
var defaults = { | |
debug: false | |
, css: [] | |
, js: [] | |
, jqpath: "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" | |
} | |
// If we don't pass options, use the defaults. | |
, o = extend(defaults, options) | |
, cachebuster = o.debug ? | |
('?v=' + (new Date()).getTime()) : ''; | |
// Kick it off. | |
init(function(){ | |
loadCSS(o.css); | |
loadJS(o.js); | |
}); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- This requires no customization, but will load a new copy of the bookmarklet every time it is clicked. --> | |
<a href="javascript:(function(d,t){var timestamp=new Date(); var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src='http://dev.local.com/scripts/mybookmarklet.js?v=' + timestamp.getTime(); s.parentNode.insertBefore(g,s)}(document,'script'));">My Bookmarklet</a> | |
<!-- This implements a check to see if the bookmarklet has already been called, and if so, it simply re-runs the init function. You'll need to customize MyBookmarklet to the name of your object --> | |
<a href="javascript:if(!window.MyBookmarklet){(function(d,t){var timestamp=new Date(); var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src='http://dev.local.com/scripts/mybookmarklet.js?v=' + timestamp.getTime(); s.parentNode.insertBefore(g,s)}(document,'script'));}else{MyBookmarklet.init();}">My Bookmarklet</a> |
@granci, I updated the script to put css at the top of the body
, but not necessarily in the head
. I think this will resolve the problem you've pointed out.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In HTML pages without any <SCRIPT> tags, link javascript don't work because s=undefined and insertBefore(g,s) fail.
With s=d.getElementsByTagName(t)[0]||null; it's ok.