IE 9.0 RC and innerHTML fragment using XSLT

@Dr_GoodvibesFeb 21.2011

Using IE 9.0 RC and attempting to translate XSL/XML (XSLT) fragment via javascript and innerHTML, but failing.

Using a known XSL and XML file combination which works in W3C – Safari, Firefox, Opera, Chrome, K-Melon etc etc. ActiveXOject – IE6.0, IE7.0, IE8.0

Using a Javascript onclick call to ‘load’ and translate XSLT via ActiveXObject (Microsoft) or DOM transformToFragment (W3C)

IE 9.0 still uses ActiveXObject to parse XSLT and has not moved to W3C in this area.

IE 9.0 RC has the option of using a HTTP mime Content-Type of application/xhtml+xml, which is great for XHTML strict.

~~[COLOR=”DarkRed”]~~~~[B]~~HOWEVER,[/B][/COLOR] This then fails to translate the XSLT fragment using IE9.0 RC with an innerHTML.

[CODE] // [ActiveXObject component for Microsoft]

var xslt = new ActiveXObject(“Msxml2.XSLTemplate”); var xmlDoc = new ActiveXObject(“Msxml2.DOMDocument”); var xslDoc = new ActiveXObject(“Msxml2.FreeThreadedDOMDocument”); xmlDoc.load(“/xml/xmlDocument.xml”); xslDoc.load(“/xsl/xslDocument.xsl”); xslt.stylesheet = xslDoc; var xslProc = xslt.createProcessor(); xslProc.input = xmlDoc; xslProc.transform(); frag.innerHTML = xslProc.output;[/CODE]

If one reverts back to a HTTP mime Content-Type of text/html in the calling HTML document using IE 9.0 RC, the javascript innerHTML is fine and the XSLT fragment is parsed without problems.

Now the question. Is there a way to use innerHTML in IE 9.0 RC when the originating/calling HTML document has a Content-Type of application/xhtml+xml?

My XSL document has the follow output statement. I have tried XSL output method=”xml”, however this still produces the same innerHTML parsing error in Javascript using IE9.0 RC.

[CODE]<xsl:output method=”html” media-type=”text/html” doctype-public=”-//W3C//DTD XHTML 1.0 Strict//EN” doctype-system=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” cdata-section-elements=”style” indent=”yes” encoding=”UTF-8″ />[/CODE]

Parsing the XSL document with a Content-Type header of application/xhtml+xml using PHP works fine to generate an XHTML document in IE 9.0 RC using the following output statement:

[CODE]<xsl:output method=”xml” media-type=”text/html” doctype-public=”-//W3C//DTD XHTML 1.0 Strict//EN” doctype-system=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” cdata-section-elements=”style” indent=”yes” encoding=”UTF-8″ />[/CODE]

This is XSL/XML translatation and not Javascript(XSLT), which is where I’m having problems.

The problem I’m having is XSLT within Javascript when adding a fragment to an object using innerHTML in IE 9.0 RC.

If I manually enter the fragement into innerHTML using IE9.0 RC WITHOUT the xml and !DOCTYPE statements in the parsed ‘XHTML’, then innerHTML in IE 9.0 RC works fine.

~~[B]~~The problem as I see it is that IE9.0 RC can not pasre innerHTML when calling Javascript from an application/xhtml+xml HTML source document when the XMLResponce fragment is of an XHTML structure.[/B]

I know IE 9.0 is not released yet, but being a Release Client and having this problem means it’ll probably be a problem in IE 9.0 when it is released.

Anybody had this problem or have a workaround for it?

I can ‘trim’ the xml document statements out of the fragment and then add it to the object via innerHTML, but that’s like the old days were every IE version has to have a workaround.

to post a comment

JavaScript

6 Comments(s) _↴

@Dr_GoodvibesauthorFeb 21.2011 — #The following is a bit of test code to demonstrate the problem I am having with IE 9.0 RC.

The code is not big and it's not smart, but if you can see in the code a problem that would make IE 9.0 RC fail when using a Content-Type: application/xhtml+xml HTTP header, then feel free to contribute.

The HTML [B]ie9.html[/B] will be invoked as application/xhtml+xml by default and should _fail_ in IE9.0 RC.

If the query [B]ie9.html?mime=html [/B]is used, then the result should work in IE 9.0 RC.

When successful a small blue pop-up window should display the following text in IE 9.0 RC

[INDENT][COLOR="Blue"]I Love IE 9.0

Vendor: Microsoft

Microsoft Version: 3[/COLOR][/INDENT]

ie9.html

[code=html]
 <?php
 #
 # File Name:     ie9.html
 # HTML query:  mime=html
 #
 
 if(strstr($_SERVER["HTTP_ACCEPT"],'application/xhtml+xml')){
 if($_GET["mime"]=="html"){
 echo header("Content-Type: text/html; charset=utf-8"); 

 } 
 else {
 echo header("Content-Type: application/xhtml+xml; charset=utf-8");
 }
 }
 else{
 echo header("Content-Type: text/html; charset=utf-8");
 } 
 
 echo '<?xml version="1.0" encoding="UTF-8" ?>'."n";
 
 ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta charset="utf-8" />
 <title>XSLT test using IE 9.0 RC</title>
 <link href="/css/ie9.css" rel="stylesheet" type="text/css"/>
 <script src="/js/ie9.js" type="text/javascript" ></script>
 </head>
 
 <body>
 <div id="m1">
 <button onclick="return VULPINE.popup('ie9',event)" >Click to Test</button>
 </div>
 </body>
 </html>
 
 [/code]

/js/ie9.js

[CODE]
 var isIe=false, isIe6=false, isIe7=false, isIe8=false, isIe9=false, w3c=false, w=window, d=document;
 w3c=(w.addEventListener)?true:false;
 var xsl=xsd();
 var isXhr=(typeof(w.XMLHttpRequest)=="undefined")?false:true;
 
 if ( !w3c || isIe ) {
 isIe = true;
 isIe6 = ( !w3c && w.external && !isXhr )?true:false;
 isIe7 = ( !w3c && isXhr && (typeof(HTMLDocument)=="undefined") )?true:false;
 isIe8 = ( !w3c && isXhr && (typeof(HTMLDocument)!="undefined") )?true:false;
 isIe9 = ( w3c && (((0.09).toFixed(1)) == 0.1) )?true:false;
 }
 
 function xsd(){
 try{xsl=new XSLTProcessor();}
 catch(e){
 var xms=new Array(
 "MSXML2.XMLHTTP.6.0"
 ,"MSXML2.XMLHTTP.5.0"
 ,"MSXML2.XMLHTTP.4.0"
 ,"MSXML2.XMLHTTP.3.0"
 ,"MSXML2.XMLHTTP"
 ,"Microsoft.XMLHTTP");
 for(var i=0;i<xms.length&&!xsl;i++){
 try{xsl=new ActiveXObject(xms[i]);isIe=true;}
 catch(e){}
 }
 }
 if(!xsl){return false;}
 else{return xsl;}
 }
 
 var VULPINE=function(){
 return { 
 
  oPop: Object(),
 
  winSizeXY: function() {
   this.wX = 0;
   this.hY = 0;
   if (typeof(w.innerWidth) == 'number') {
   this.wX = w.innerWidth;
   this.hY = w.innerHeight;
   } else if (d.documentElement && (d.documentElement.clientWidth || d.documentElement.clientHeight)) {
   this.wX = d.documentElement.clientWidth;
   this.hY = d.documentElement.clientHeight;
   } else if (d.body && (d.body.clientWidth || d.body.clientHeight)) {
   this.wX = d.body.clientWidth;
   this.hY = d.body.clientHeight;
   }
   return this;
  },
 
  winContent: function(obj){
 
   obj.oDv.appendChild(obj.oDA);
 
  },
 
  xmlContent: function(obj){
   if(w.ActiveXObject) {
   var xslt=new ActiveXObject("Msxml2.XSLTemplate");
   var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
   var xslDoc=new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
   var xslGo1 = function(){
   if (xslDoc.readyState == 4 && xmlDoc.readyState == 4) {
   xslt.stylesheet = xslDoc;
   var xslProc = xslt.createProcessor();
   xslProc.input = xmlDoc;
   xslProc.transform();
   try{
   obj.oDA = new VULPINE.DOMdiv(0,0,0,0,0,0);
   obj.oDA.innerHTML = xslProc.output;
   obj=VULPINE.winContent(obj);
   }
   catch(e){
   alert('IE ActiveXObject XSLT error message: '+e.toString());
   } 
 
   }
   }
   xmlDoc.async=true; 
   xmlDoc.onreadystatechange=xslGo1;
   xmlDoc.load("/xml/"+obj.xf+".xml");
   xslDoc.async=true;
   xslDoc.onreadystatechange=xslGo1;
   xslDoc.load("/xsl/"+obj.xf+".xsl");
   } 
   else {
   var xslDoc=VULPINE.xhr();
   var xmlDoc=VULPINE.xhr();
   var xslGo2=function(){
   if ( xslDoc.readyState==4 && xmlDoc.readyState==4 ){
   var processDoc = new XSLTProcessor();
   try{
   processDoc.importStylesheet( xslDoc.responseXML );
   obj.oDA=processDoc.transformToFragment( xmlDoc.responseXML, document ); 
   }
   catch(e){
   alert('W3C XSLT error message: '+e.toString());
   }
   VULPINE.winContent(obj);
   }
   }
   xmlDoc.onreadystatechange=xslGo2;
   xmlDoc.open("GET","/xml/"+obj.xf+".xml",true);
   xmlDoc.send(null);
   xslDoc.onreadystatechange=xslGo2;
   xslDoc.open("GET","/xsl/"+obj.xf+".xsl",true);
   xslDoc.send(null);
 
   } 
  },
 
  xhr: function() {
   try {
   xhr = new XMLHttpRequest();
   } catch(e) {
   var xhrv = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP");
   for (var i = 0; i < xhrv.length && !xhr; i++) {
   try {
   xhr = new ActiveXObject(xhrv[i]);
   } catch(e) {}
   }
   }
   if (!xhr) {
   return false;
   } else {
   return xhr;
   }
  }, 
 
  DOMdiv:function(x,y,w,h,col,a){
   var oDv=document.createElement("div");
   if(a){oDv.style.position="absolute";}
   if(x){oDv.style.left=x+"px";}
   if(y){oDv.style.top=y+"px";}
   if(w){oDv.style.width=w+"px";}
   if(h){oDv.style.height=h+"px";}
   oDv.style.visibility="visible";
   if(col){oDv.style.backgroundColor=col;}
   return oDv;
  }, 
 
  winPop :function(){
   oXY = new VULPINE.winSizeXY();
   var x = (oXY.wX / 2) - 100;
   VULPINE.oPop.oDv = new VULPINE.DOMdiv(x,20,200,100,"LightBlue",true);
   VULPINE.oPop.oDv.id="pop"; 
   document.body.appendChild(VULPINE.oPop.oDv); 
  },
 
  popup :function (xf,evt){ 
 
   VULPINE.oPop.xf = xf;
   VULPINE.oPop.evt = evt;
   VULPINE.winPop();
   VULPINE.xmlContent(VULPINE.oPop);
 
  }
 }
 }();
 [/CODE]

/css/ie9.css

[CODE]
 #m1{
 margin:2em;
 }
 #pop{
 font:normal normal normal 75%/1em verdana,"Arial Unicode MS",arial,helvetica,sans-serif;
 border:1px solid blue;
 padding:1em;
 -moz-border-radius:5px;
 border-radius:5px;
 -moz-box-shadow:rgba(99, 99, 99, 0.6) 5px 5px 7px 2px;
 -webkit-box-shadow:rgba(99, 99, 99, 0.6) 5px 5px 5px;
 box-shadow:rgba(99, 99, 99, 0.6) 5px 5px 7px 2px;
 }
 
 #pop p{
 text-shadow: -0.04em -0.04em 0 rgba(255, 255, 255, 0.2),1px 1px 0 rgba(0, 0, 0, 0.2);
 }
 [/CODE]

/xsl/ie9.xsl

[CODE]
 <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet version="1.0" 
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:msxsl="urn:schemas-microsoft-com:xslt" 

 xmlns:php="http://php.net/xsl">
 
 <xsl:template match="/ie9"> 
 
 <xsl:variable  name="msie" select="system-property('msxsl:version')" />
 <xsl:variable name="vendor" select="system-property('xsl:vendor')"/>
 
 <p><xsl:value-of select="greetings" /></p>
 <p>Vendor: <xsl:value-of select="$vendor" /></p>
 <xsl:if test="$msie &gt; 0">
 <p>Microsoft Version: <xsl:value-of select="$msie" /></p>
 </xsl:if>
 
 </xsl:template> 
 
 <xsl:output method="html"
 media-type="text/html"
 doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
 doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
 cdata-section-elements="style"
 indent="yes"
 encoding="UTF-8" />
 
 </xsl:stylesheet> 

 [/CODE]

/xml/ie9.xml

[CODE]
 <?xml version="1.0" encoding="UTF-8" ?>
 <ie9>
 <greetings>I Love IE 9.0</greetings>
 </ie9>
 [/CODE]

@rnd_meFeb 21.2011 — #watch those mimes; serve your html pages correctly as text/html and you won't have a problem.

"application/xhtml+xml" is for like rss feeds and stuff, not regular pages, especially since it's time for html5.

@Dr_GoodvibesauthorFeb 21.2011 — #Thank you for your reply.

I hear what you're saying and with the introduction of HTML 5.0, supported now by most major [B]desktop [/B] web browsers it would seem the only way forward.

text/html is the correct mime type for HTML 4.01 and HTML 5.0, that is true.

HTML 4.01 [SIZE="2"][COLOR="RoyalBlue"]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">[/COLOR][/SIZE]

HTML 5.0 [SIZE="2"][COLOR="RoyalBlue"]<!DOCTYPE HTML>[/COLOR][/SIZE]

application/xhtml+xml is the correct mime type for XHTML 1.0 strict.

Desktop: [COLOR="RoyalBlue"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/COLOR]

Mobile: [COLOR="RoyalBlue"]<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd" >[/COLOR]

application/rss+xml is the correct mime type for RSS documents.

[COLOR="RoyalBlue"]<rss version="2.0" ........ >[/COLOR]

Check the W3C for further details http://www.w3.org/TR/xhtml-media-types/

HTML 4.01 synatx

<meta>

<br>

XHTML 1.0 syntax

<meta/>

<br/>

On mobile phones, application/xhtml+xml is the correct mime type for XHTML web pages (even better, application/vnd.wap.xhtml+xml) . If one was to pass a mime type of text/html to many mobile phones it'll parse the web page as cHTML. That is REALLY bad!!! AND that's regardless of what !DOCTYPE you have.

iPhones and Android phones are not the only mobile phones. ?

Note I have [B]very clearly[/B] defined my web pages as XHTML 1.0 strict, this is so the wider community of mobile phones are supported as will as most desktop web browsers.

A true text/html document would require a 4.01 or HTML 5 !DOCTYPE statement to be parsed correctly.

So, I think it's fair to say we are parsing an XHTML strict 1.0 document using the application/xhtml+xml mime type with IE 9.0 RC and it is failing to parse innerHTML as XHTML.

The only true cross-over document/mime type for both desktop and mobile phones is application/xhtml+xml and XHTML 1.0 strict.

And bless, now IE 9.0 is messing with that model. Prior to IE9.0, IE didn't know about XHTML documents and just blindly parsed them, using HTML.

IE 9.0 using application/xhtml+xml is parsing XHTML documents correctly and will barf if you have <meta> in the <head>. This is correct as it should have an ending tag thus <meta/>.

The Opera web browser is the great leveller when it comes to adhering to 'strict' document structure and barfs when you get it wrong. :o

I don't want to go down the path of sniffing web browser types in PHP to get the supported mime type for a given browser. As written somewhere, sniffing anything is bad for you. And it's bad enough I have to do it in Javascript.

So let's [B]NOT[/B] get bogged down on mime Content-Type where not addressing IE 9.0 RC and innerHTML. :o

[B]So, IE 9.0 RC using XHTML 1.0 strict (application/xhtml+xml) and XHTML fragments inserted using innerHTML. How about that then??????????[/B]

Is it possible? Or is this just another "Don't go there girl", area of IE 9.0 we don't speak of.

It could be, I've just not coded my XSLT implementation correctly for IE 9.0 RC and when coded correctly using IE 9.0 RC, is fine and handles XHTML with no problems.

@rnd_meFeb 21.2011 — #one thing is quite unclear: what do you mean by "parsing innerHTML" ?

are you getting an exception, malformed code, what?

what are you trying to accomplish here?

also, you're not serving fragments with doctypes and xml decs are you? Those extra nasties have to be stripped off for all sorts of javascript xml processing: e4x, xslt, etc...

@Dr_GoodvibesauthorFeb 22.2011 — #one thing is quite unclear: what do you mean by "parsing innerHTML" ?

are you getting an exception, malformed code, what?

what are you trying to accomplish here?

also, you're not serving fragments with doctypes and xml decs are you? Those extra nasties have to be stripped off for all sorts of javascript xml processing: e4x, xslt, etc...[/QUOTE]

Thanks for bearing with me.

The Exact error message returned for IE 9.0 RC when using mime type application/xhtml+xml is as follows:

[COLOR="Red"][INDENT]

DOM Exception: SYNTAX_ERR(12)[/INDENT][/COLOR]

This is returned from the catch(e){alert(e.tostring());}

It is triggered on the following line:

[INDENT][COLOR="Blue"]obj.oDA.innerHTML = xslProc.output;[/COLOR][/INDENT]

The output from the translated XML is 'assigned' to the object using innerHTML.

That object is then appendChild() to the document at a give point.

As you're alluding to and I have noted, if you strip the !DOCTYPE off the returned XML response, All is well.

There may be another method of translating the XML fragment in IE 9.0 RC that will 'clean' the output and strip the !DOCTYPE out of the XML response.

Like most people, this is a two prong attack, as I'm also looking at modify the ActiveXObject section to better parse the XML response using the features of IE 9.0 RC. But it's a bit of a grey area at the moment (for me).

I was hoping someone would say, "Hay, you noob, just use x and it'll work." ?

As you can see in the attached jpg, XSLT,AJAX both support a complete pop-up windowing framework. XSLT populates the content of the pop-up window(s). Displayed in the jpg is one contact pop-up, but one could have any number of pop-ups on the web page at any time, serving as 'web pages' which on an olde world web page would be displayed as a single web page.

[upl-file uuid=3cc8a9ff-91c4-4850-a7e0-3a0ad883de2d size=62kB]pop-up.jpg[/upl-file]

@Dr_GoodvibesauthorFeb 22.2011 — #Sorted!

Just had to correct the XSL file used to create the XHTML fragment which is eventually appended to the document.

Had to remove the following attributes from the XSL output statement

[COLOR="MediumTurquoise"]

doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"

doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"[/COLOR]

[CODE]
 <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet version="1.0" 
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:msxsl="urn:schemas-microsoft-com:xslt" 

 xmlns:php="http://php.net/xsl">
 
 <xsl:template match="/ie9"> 
 
 <xsl:variable  name="msie" select="system-property('msxsl:version')" />
 <xsl:variable name="vendor" select="system-property('xsl:vendor')"/>
 
 <p><xsl:value-of select="greetings" /></p>
 <p>Vendor: <xsl:value-of select="$vendor" /></p>
 <xsl:if test="$msie &gt; 0">
 <p>Microsoft Version: <xsl:value-of select="$msie" /></p>
 </xsl:if>
 
 </xsl:template> 
 
 <xsl:output method="html"
 media-type="text/html"
 cdata-section-elements="style"
 indent="yes"
 encoding="UTF-8" />
 
 </xsl:stylesheet>
 [/CODE]

Now have pop-up windows in IE 9.0 RC without any noticeable impact on other browsers.

Time for a nice glass of wine. ?

[upl-file uuid=2a80911c-c5bb-453f-b529-78b5bc166d88 size=73kB]lockstore-ie9.jpg[/upl-file]

Also in #JavaScript _↴

Question DHTML Drop Down Menu Newbie needs help with Arrays

Success!

Help @Dr_Goodvibes spread the word by sharing this article on Twitter...

Tweet This

IE 9.0 RC and innerHTML fragment using XSLT

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴