Articles

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

Related Articles

  • 29 Jul 2009 CSS Position Fixed for IE6
  • 23 Jul 2009 Subtle Hover CSS Inspect Bookmarklet
  • 21 Jun 2009 Testing a way to post to my blog quickly
  • 21 Jun 2009 Jekyll quick post shell script
  • 09 Apr 2009 Blazing fast Semantic JS Templating with edit-in-place templates!
  • 07 Mar 2009 SubtleClickAll Bookmarklet
  • 05 Dec 2008 MooTools databinding plugins coming soon
  • 25 Oct 2008 Tabs or Spaces?
  • 20 Oct 2008 How to have a box default to hidden and then fade it in later
  • 21 Sep 2008 NEW TextMate Code Completion and Smart ToolTips
Thomas Aylott Polaroid
SubtleGradient
  • GitHub
  • X (née Twitter)
  • LinkedIn
  • YouTube
  • OpenSea
  • Facebook
  • Blog
  • Email

Thomas Aylott / subtleGradient