AJAX Magazine: XHTML And document.write Replacement : Mobile Edition

Published on 2006-11-13 23:28:03

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 XHTML innerHTML
	// is actually XHTML - Opera and Safari assume that it's XML
	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] );
};

Related Entries