CDATA - FireFox and IE difference

dougalim · Feb 8, 2008

In Firefox I can store CDATA as javascript var.innerHTML and then render it exactly as intended. IE renders it as text. The follow xml and xsl should help to understand what I'm having a problem with:

XML

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
<cw>
	<content><![CDATA[<table border="1"><tr><td>Home</td></tr></table>]]></content>
</cw>

XLS

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="[URL unfurl="true"]http://www.w3.org/1999/XSL/Transform">[/URL]
<xsl:output method="html" encoding="iso-8859-1" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>[/URL]
<xsl:template match="/">
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Untitled Document</title>
</head>
<body>
<div id="c"></div>
</body>

<script type="text/javascript">

var d, pagecontent;
<xsl:for-each select="cw">

	d = document.createElement("div");
	d.innerHTML = '<xsl:value-of select="content"/>'
	
	document.getElementById("c").appendChild(d);

</xsl:for-each>

</script>
</html>
</xsl:template>
</xsl:stylesheet>

Firefox renders the CDATA as a simple table with a border, IE displays it exactly as it is entered in the XML document.

I've also tried removing the <![CDATA[...]]> tags and replaced the < with < and > with > for the table tags and Firefox still works but IE still displays <table......

Is there something I can do?

tsuji · Feb 8, 2008

[0] I understand that you put the script section at the end to let the user agent properly rendered the client-side element, but I would prefer to put those lines in a function as window's onload handler. Barely exposed script lines are to my mind susceptible to mishap and of form less appealling.

[1] As to the innerHTML part, you have to "unescape" the xml built-in entities are rendering time. I've to say not quite obvious and in some sense have to work like a hack. This is how you can do it on that script section.
[tt]
<script type="text/javascript">
[blue]function x(s){
var t;
t=s.replace(/</g,"\x3c");
t=t.replace(/>/g,"\x3e");
return t
}
[/blue]
[blue]function y() {[/blue]
var d, pagecontent;
<xsl:for-each select="cw">
d = document.createElement("div");
d.innerHTML = [blue]x([/blue]'<xsl:value-of select="content"/>'[blue])[/blue]
document.getElementById("c").appendChild(d);
</xsl:for-each>
[blue]}
window.onload=y;[/blue]
</script>
[/tt]
ps: don't be disturbed by my single syllable function name. You can put it as "meaningful" as you like.

dougalim · Feb 8, 2008

Thank you, this has saved me a lot of work and stress. I had tried something similar but had not found any reference to \x3c or made the connection if I did see it.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CDATA - FireFox and IE difference

dougalim

Programmer

tsuji

Technical User

dougalim

Programmer

Similar threads

Part and Inventory Search

Sponsor