AJAX Magazine: XHTML And document.write Replacement

John Resig posted document.write() replacement for XHTML compatibility working with Firefox 1.5+, Opera 9, and Safari 2+, a fix for document.write() usage with XHTML documents served with the doctype "application/xhtml+xml". John's solution still not the definitive solution for the problem since it fail for Safari 2 and sort-of Fail for Safari 3 and AdSense test. I don't think that hard-coding document.write in JavaScript will be a definitive solution anyway if browsers are not aware about W3C standard, without talking about IE which completely don't know how to render XHTML document correctly.

document.write = function(str){
	var moz = !window.opera && !/Apple/.test(navigator.vendor);
	
	// Watch for writing out closing tags, we just
	// ignore these (as we auto-generate our own)
	if ( str.match(/^<\//) ) return;

// Make sure & are formatted properly, but Opera
	// messes this up and just ignores it
	if ( !window.opera )
		str = str.replace(/&(?![#a-z0-9]+;)/g, "&");

// Watch for when no closing tag is provided
	// (Only does one element, quite weak)
	str = str.replace(/<([a-z]+)(.*[^\/])>$/, "<$1$2></$1>");
	
	// Mozilla assumes that everything in <acronym title="Extensible HyperText Markup Language">XHTML</acronym> innerHTML
	// is actually <acronym title="Extensible HyperText Markup Language">XHTML</acronym> - Opera and Safari assume that it's <acronym title="Extensible Markup Language">XML</acronym>
	if ( !moz )
		str = str.replace(/(<[a-z]+)/g, "$1 xmlns='http://www.w3.org/1999/xhtml'");
	 
	// The HTML needs to be within a XHTML element
	var div = document.createElementNS("http://www.w3.org/1999/xhtml","div");
	div.innerHTML = str;
	
	// Find the last element in the document
	var pos;
	
	// Opera and Safari treat getElementsByTagName("*") accurately
	// always including the last element on the page
	if ( !moz ) {
		pos = document.getElementsByTagName("*");
		pos = pos[pos.length - 1];
		
	// Mozilla does not, we have to traverse manually
	} else {
		pos = document;
		while ( pos.lastChild && pos.lastChild.nodeType == 1 )
			pos = pos.lastChild;
	}
	
	// Add all the nodes in that position
	var nodes = div.childNodes;
	while ( nodes.length )
		pos.parentNode.appendChild( nodes[0] );
};

Hello:

I am really in a bind. I need to AJAXify a web page that contains a charting component (ILOG). Unfortunately, charting component uses document.write() to write some divs and tags so I am having problems loading the charting component (mainly javascript) via AJAX.

Any ideas, please!!!!

PS: Site is an internal one in a company where 99% of users have IE

Posted by Obi | March 1, 2007 10:59 PM | Reply

This is a little late to the game but maybe this will help somebody else out there. This worked great for an xml/xslt site in doing google adsense...

http://www.stevetucker.co.uk/page-innerxhtml.php

in combination with...

document.write=function(e){innerXHTML(IDorElement,e,true);};

hope this helps

Posted by cabrera | March 7, 2008 8:28 AM | Reply