2016-12-29 1 views
0

API에서 오는 XSLT 스타일 시트를 렌더링 하려는데 IE에서는 Chrome을 제외한 FF에서는 정상적으로 작동한다고 생각했습니다.XSLT가 IE 11에서 작동하지 않고 xml을 변환하지 않습니다.

작동하는 w3c의 예제를 사용했지만 파일에서 XML 및 XSLT를 호출하고 있는데, 여기서 광산은 AJAX 호출 성공 응답에서 나옵니다.

W3school 샘플 XSLT sample 내 버전이

html로에서 XSLT를 표시
function getJson() { 
$.get(url).. 
var json2XMLResult = J2XML.json2xml_str(data); 
getResultXsl(json2XMLResult) 
} 

function getResultXsl(json2xml) { 
    $.get(url) 
     .then(function (data) { 
      let resDefinition = data.Results.ResponseDisplayDefinition; 
      let xmlString = '<?xml version="1.0"?><Response>' + json2xml + '</Response>'; 
      if (typeof DOMParser != "undefined") { 
       parseXml = function (xmlStr) { 
        return (new DOMParser()).parseFromString(xmlStr, "text/xml"); 
       }; 
      } 
      else if (typeof ActiveXObject != "undefined" && 
       new ActiveXObject("Microsoft.XMLDOM")) { 
       parseXml = function (xmlStr) { 
        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
        xmlDoc.async = "false"; 
        xmlDoc.loadXML(xmlStr); 
        return xmlDoc; 
       }; 
      } 

      else { 
       throw new Error("No XML parser found"); 
      } 

      displayResult(xmlString, resDefinition); 
     }) 
} 

아래 alert() 당신은 크롬이나 IE에 렌더링하기 위해 노력하고 있는지 보여 않는,

function displayResult(xmlStrToConvert, xslStrToConvert) { 
    var xmlConverted = parseXml(xmlStrToConvert); 
    var xslConverted = parseXml(xslStrToConvert); 
    if (window.ActiveXObject || "ActiveXObject" in window) { 
     alert('It is IE but not showing anything'); 
     var ex = xmlConverted.transformNode(xslConverted) 
     $('#xmlJson').append(ex); 
    } else { 
     alert('its not IE'); 
     // code for Chrome, Firefox, Opera, etc. 
     var xsltProcessor = new XSLTProcessor(); 
     xsltProcessor.importStylesheet(xslConverted); 
     var resultDocument = xsltProcessor.transformToFragment(xmlConverted, document); 
     $('#xmlJson').append(resultDocument); 

    } 
} 
입니다

시도해보기 var ex= xmlConverted.transformToFragment(xslConverted, document);

누군가가이 문제가 잘못되었음을 지적 할 수 있습니까? 또한 디버그하기가 더 힘든 IE11에서 dev 도구를 열 수 없지만 위의 코드에서 잘못된 점을 알릴 수 있습니다.

편집 아래의 코드가 잘 경우 transformNode()Object doesn't support property or method 'transformNode' 또는 정의되지 XSLTProcessor()을 반환하지만 beforeSend 아약스 전화가 누군가가 확인할 수는

function transformXML(json2xml) { 
$.ajax({ 
    type: 'GET', 
    url: window.parent.__env.apiManagement + 'Preview/TypeDefinition?objectName=' + apiObjectResponse, 
    beforeSend: function (xhr, settings) { 
     if (window.ActiveXObject) { 
      xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
     } 
     else { 
      xhr = new XMLHttpRequest(); 
     } 
     try { xhr.responseType = "msxml-document"; } catch (err) { } 
    }, 
    success: function (data, status, xhr) { 
     var parseXml = new DOMParser(); 
     var xslStylesheet = parseXml.parseFromString(data.Results.ResponseDisplayDefinition, "text/xml"); 
     var xmlString = '<?xml version="1.0"?><Response>' + json2xml + '</Response>'; 
     var convertedXML = parseXml.parseFromString(xmlString, "text/xml"); 

     // // cross-browser logic omitted for simplicity 
     if(window.ActiveXObject || xhr.responseType == "msxml-document") { 
      var ex = convertedXML.transformNode(xslStylesheet); 
      console.log('>>> ', convertedXML) 
      alert(xmlString) 
      $('#xmlJson').append(ex); 
     } 
     // code for Chrome, Firefox, Opera, etc. 
     else if (document.implementation && document.implementation.createDocument) { 
      var xsltProcessor = new XSLTProcessor(); 
      xsltProcessor.importStylesheet(xslStylesheet); 
      var resultDocument = xsltProcessor.transformToFragment(convertedXML, document); 
      $('#xmlJson').append(resultDocument); 
     } 

    } 
}); 

}

+1

콘솔에서 문제를 지적하는 오류를 확인 했습니까? –

+0

dev 도구를 열 수 없습니까? 페이지를 열기 전에 열기? 어떤 이유로 든 – epascarello

+0

이 IE에서 콘솔을 열 수 없으면 충돌이 계속됩니다. :/그러나 W3C에서 예제를 시도하면 완벽하게 작동합니다. – MrNew

답변

1

IE 11은 DOMParser 지원 그러나 그것을 사용하여 XSLT를 지원하지 않는 IE XML DOM 문서를 만듭니다. 따라서 IE의 코딩을하고 XSLT를하고 ActiveXObject를 사용하여 MSXML DOM 문서를 만든 다음 transformNode을 사용할 수 있도록하려면 IE의 코딩 순서를 변경해야합니다.

당신은 문자열에서 XML 및 XSLT를 분석 한 후 내가

function parseXmlStringForTransformation(xml) { 
     try { 
      var doc = new ActiveXObject('Msxml2.DOMDocument.6.0'); 
      doc.loadXML(xml); 
      return doc; 
     } 
     catch (e) { 
      var domParser = new DOMParser(); 
      var doc = domParser.parseFromString(xml, 'application/xml'); 
      return doc; 
    } 
    } 

을 수행 https://martin-honnen.github.io/xslt/2016/test2016123001.html에서 같은 방법을 사용하는 것이 좋습니다 것입니다 클라이언트 측 XSLT 변환을 사용하고자하는 것 및 지원되는 경우 이제 XSLTProcessor를 사용하기 때문에 또는 해당 MSXML 6 액티브 XSLT API는 변환을 실행합니다 :

function transform(xmlDoc, xslDoc, xsltParams, targetElement) { 
     if (typeof XSLTProcessor !== 'undefined') { 
     var proc = new XSLTProcessor(); 
     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 = new ActiveXObject('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; 
     } 
    } 

그런 다음 사용할 수있는 등의

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 XSLT 
     document.getElementById('d1') // target element in your HTML to insert the transformation result into 
    ); 
    }) 
+0

예, w3school은 C가 아니라 나쁜 뜻입니다. 하지만 그렇지 않다면 위 코드가 옳은가요? 옳을 필요가있는'if()'만? – MrNew

+0

W3school의 예제는'xhttp'를 사용하고 있습니다.'$ .get()'은'xhttp.responseType'에 접근 할 수 있습니까? – MrNew

+0

'xmlDoc.async'와 같은 부울 속성이 부울 Javascript 값으로 설정되어야합니다. 예를 들어 문자열이 아닌 문자열을 설정하려는 경우 'loadXML'을 사용하여 구문 분석하는 한 기억하십시오. 문자열은 파싱이 어쨌든 동기식입니다.나는 JQuery와 브라우저 DOM/API의 혼합이 의미가 있는지 여부를 알 수 없다. JQuery를 사용하지 않는다. HTTP를 통해 XML 및 XSLT를로드하려면 IE 11, Edge, Chrome, Mozilla에서 작동하는 예제는 http://home.arcor.de/martin.honnen/xslt/test2016081501.html을 참조하십시오. –

관련 문제