Working on styling the contents of popup windows can be frustrating and laborious. But not if you can just reload the CSS…
This bookmarklet will reload all the associated stylesheets in the current document. It looks for all <link/>
elements with rel="stylesheet"
, removes from the DOM and re-adds them appending a ?_=1234567890 (or &_ depending on the URL, where the numbers represent the JS timestamp) into the <head/>
.
Hopefully this will help someone suffering similar pain to myself!
Reload CSS (Add the link to the left to your bookmarks to use!)
Please note: I haven’t tested this in IE, but surely it’ll work… Right?
Full commented code:
(function(document, getElementsByTagName, toString, match, href, length, i) {
var head = document[getElementsByTagName]('head')[0],
links = document[getElementsByTagName]('link'),
store = [];
// iterate over all the existing s
for (; i < links[length]; i++) {
// if it's a stylesheet
if (links[i][href][toString]()[match](/\.css/)) {
// clone the element, false is needed as Firefox requires the deep flag
store.push(links[i].cloneNode(!1));
// then remove it from the DOM
links[i].parentNode.removeChild(links[i]);
// decrement i, because links is a NodeList (not an array) and when the element is
// removed from the DOM, it is also removed from the NodeList
i--;
}
}
// iterate over the stored items
while (store[length]) {
// strip out any previous cachebusting querystring
store[0][href] = store[0][href][toString]().replace(/([&\?])_=\d+/, '');
store[0][href] = store[0][href] + (store[0][href][toString]()[match](/\?/) ? '&' : '?') + '_=' + Date.now()[toString]();
// put the element in the
head.appendChild(store.shift());
}
})(document, 'getElementsByTagName', 'toString', 'match', 'href', 'length', 0);