public
Last active

jQuery Bookmarklet Template w/ Async Loading

  • Download Gist
bookmarklet.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
// 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);
});
};

In HTML pages without any

@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.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.