You want to embed a gist on your page. But the CSS that GitHub injects into your page totally screws up your perfectly crafted CSS.
Or maybe you want to use AJAX to load a script that requires the use of document.write
. But after teh page has loaded document.write
tends to destroy the universe without even asking first!
Replace document.write
!
I created a replacement for document.write
that saves the arguments and then injects them into the page after the dom is ready.
This is useful for embedding gists on your page since you can use the additional filter option to reject stuff from being written to your page. This would also be really handy for sites that include JavaFX or certain ads or anything that requires the use of document.write
on your page. By deferring the injection of that stuff until after the dom is ready your visitors see the page content before any of the extras like Java applets or ads begin to load.
update: Oh yeah, it works after the DOM loads now too. You can optionally set document.write.context
to the element you want to inject into. It defaults to document.body
. Enjoy!
Thanks to Steida for taking my rough proof-of concept and getting it working much better and faster and to Jan Kassens and random other MooTools pplz for helping refine it.
/* | |
--- | |
source: http://gist.github.com/133677 | |
provides: document.write | |
description: MooTools based document.write replacement | |
requires: MooTools | |
author: Thomas Aylott -- SubtleGradient.com | |
thanks: Daniel Steigerwald -- daniel.steigerwald.cz | |
license: MIT | |
... | |
*/ | |
(function($){ | |
var wrapper = new Element('div'), | |
fragment = document.createDocumentFragment(); | |
document._writeOriginal = document.write; | |
document.write = function(){ | |
var args = arguments, id = 'document_write' + $time().toString(36); | |
if (!Browser.loaded) | |
document._writeOriginal('<span id="' + id + '"></span>'); | |
else | |
id = new Element('span',{id:id}).inject(document.write.context); | |
function documentWrite(){ | |
var html = Array.join(args, ''); | |
document.addEvent('domready', function(){ | |
Array.filter(wrapper.set('html', html).childNodes, document.write.filter).each(function(node){ | |
fragment.appendChild(node); | |
}); | |
(id = $(id)).parentNode.replaceChild(fragment, id); | |
}); | |
} | |
setTimeout(documentWrite, 0); | |
}; | |
document.write.context = document.body; | |
document.write.filter = function(el){ return true; }; | |
})(document.id||window.$); |
// USAGE EXAMPLES // | |
var start = +new Date; | |
var i = 1000; while (i--) { | |
document.write(i+' '); | |
} | |
var end = +new Date; | |
alert(end-start); | |
window.addEvent('domready',function(){ | |
document.write('Lorem ipsum dolor sit amet'); | |
var myDiv = new Element('div'); | |
document.write.context = myDiv; | |
document.write('Lorem ipsum dolor sit amet'); | |
myDiv.inject(document.body,'top'); | |
}); | |
document.write(1,2,3,4); // handles multiple arguments | |
document.write(); // doesn't break | |
document.write(null); | |
// Add a filter to stop certain things from being injected into your page | |
document.write.filter = function(el){ | |
return el && !$try(function(){ return el.get('tag') == 'link' }) | |
}; | |
document.write('<link rel="stylesheet" href="http://gist.github.com/stylesheets/gist/embed.css"/>'); |
Thomas Aylott / subtleGradient