Xslt Not Working On Ie 11, Doesn't Transform Xml

Trying to render XSLT stylesheet that's coming from API, thought it's working fine on Chrome, FF except IE. I tried using the example from w3c which works but that's calling the X

Solution 1:

IE 11 supports DOMParser but using it builds an IE XML DOM document which does not have any support for XSLT. So you at least need to change the order of checks, if you are coding for IE and want to do XSLT then make sure you create an MSXML DOM document using ActiveXObject, then you can use transformNode on it.

As you seem to want to parse XML and XSLT from strings and then use client-side XSLT transformation I would suggest to use an approach like in https://martin-honnen.github.io/xslt/2016/test2016123001.html, which does

functionparseXmlStringForTransformation(xml) {
      try {
          var doc = newActiveXObject('Msxml2.DOMDocument.6.0');
          doc.loadXML(xml);
          return doc;
      }
      catch (e) {
          var domParser = newDOMParser();
          var doc = domParser.parseFromString(xml, 'application/xml');
          return doc;
     }
  }

and then uses XSLTProcessor where supported or the corresponding MSXML 6 ActiveX XSLT API to run the transformation:

functiontransform(xmlDoc, xslDoc, xsltParams, targetElement) {
      if (typeofXSLTProcessor !== 'undefined') {
        var proc = newXSLTProcessor();
        proc.importStylesheet(xslDoc);

        for (var prop in xsltParams) {
          proc.setParameter(null, prop, xsltParams[prop]);
        }

        var resultFrag = proc.transformToFragment(xmlDoc, targetElement.ownerDocument);

        targetElement.textContent = '';
        targetElement.appendChild(resultFrag);
      }
      else {
          var template = newActiveXObject('Msxml2.XslTemplate.6.0');
          template.stylesheet = xslDoc;
          var proc = template.createProcessor();

          for (var prop in xsltParams) {
            proc.addParameter(prop, xsltParams[prop]);
          }

          proc.input = xmlDoc;

          proc.transform();

          var resultHTML = proc.output;

          targetElement.innerHTML = resultHTML;
      }
  }

You can then use that as in

document.addEventListener('DOMContentLoaded', function() {
    transform(
        parseXmlStringForTransformation('<root>...<\/root>'),
        parseXmlStringForTransformation('<xsl:stylesheet ...>...<\/xsl:stylesheet>'),
        { }, // empty parameter object if you don't want to pass parameters from Javascript to XSLTdocument.getElementById('d1')  // target element in your HTML to insert the transformation result into
    );
  })