Replace document.write using MooTools

Problem

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!

Solution

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!

Script

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.$);

view raw document.write.moo.js hosted with ❤ by GitHub

	// 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"/>');

view raw document.write.usage.moo.js hosted with ❤ by GitHub

Replace document.write using MooTools

Problem

Solution

Script

Related Articles