Promise現在、Edge、Chrome、Firefoxの最新バージョンをサポートしているということを考えると、IEでPromiseのサポートを利用するライブラリを使用してXMLとXSLTドキュメントの非同期読み込み処理を約束します。次のようにその方法は、XMLドキュメントをロードするためのコードととXSLTドキュメントといくつかのXSLTパラメータを設定するためのオプションで、HTMLの結果を得るために、XSLT変換を適用するには、なります
function loadDoc(url) {
return new Promise(function(resolve) {
var req = new XMLHttpRequest();
req.open("GET", url);
if (typeof XSLTProcessor === 'undefined') {
try {
req.responseType = 'msxml-document';
}
catch (e) {}
}
req.onload = function() {
resolve(this.responseXML)
}
req.send();
});
}
function transform(xmlUrl, xslUrl, xsltParams, targetElement) {
Promise.all([loadDoc(xmlUrl), loadDoc(xslUrl)]).then(function(data) {
var xmlDoc = data[0];
var xslDoc = data[1];
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;
}
});
}
それは、その後のように呼び出すことができますXSLTは、次いで上記ジャ
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- pass in a string with a single id value for the parameters ids or a '|' separated list of ids -->
<xsl:param name="ids" select="''"/>
<xsl:output method="html" indent="yes"/>
<xsl:template match="/">
<xsl:for-each select="products/test[$ids = '' or contains(concat('|', $ids, '|'), id)]">
<a href="#"> Hello # <xsl:value-of select="value"/></a>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
であれば第三の引き数はJavascriptで
transform('file.xml', 'input.xsl', { ids : 'test_value2'}, document.getElementById('d1'));
は、例えば、XSLTスタイルシートに設定する任意のパラメータを持つオブジェクトvascriptスニペットは、idsパラメータを設定します。
XML入力サンプルは、Windows 10上のIE、エッジ、ChromeとFirefoxの現在のバージョンで作業し
<?xml version="1.0" encoding="UTF-8"?>
<products>
<test>
<id>test_value1</id>
<value>1</value>
</test>
<test>
<id>test_value2</id>
<value>2</value>
</test>
</products>
オンラインサンプルがhttps://martin-honnen.github.io/xslt/arcor-archive/2016/test2016081501.htmlであるです。
作業コードスニペットは
function loadDoc(url) {
return new Promise(function(resolve) {
var req = new XMLHttpRequest();
req.open("GET", url);
if (typeof XSLTProcessor === 'undefined') {
try {
req.responseType = 'msxml-document';
}
catch (e) {}
}
req.onload = function() {
resolve(this.responseXML)
}
req.send();
});
}
function transform(xmlUrl, xslUrl, xsltParams, targetElement) {
Promise.all([loadDoc(xmlUrl), loadDoc(xslUrl)]).then(function(data) {
var xmlDoc = data[0];
var xslDoc = data[1];
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('http://home.arcor.de/martin.honnen/cdtest/test2016081501.xml', 'http://home.arcor.de/martin.honnen/cdtest/test2016081501.xsl', { ids : 'test_value2'}, document.getElementById('d1'));
})
<script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>
<h1>Testing XSLT transformation</h1>
<div id="d1"></div>
まあ、エッジは 'XSLTProcessor'をサポートし、あなたがそのインターフェイス/オブジェクトのサポートをチェックするコードを書きたいならば、あなたがすべきですもちろんそれを直接チェックする'document.implementation'のような関連性のないものをチェックしたり、XSLTプロセッサーの存在を前提にする代わりに、' if（typeof XSLTProcessor！== 'undefined'）{//ここでXSLTProcessorを使用} ' IEについては、どのバージョンのIEをターゲットにしていますか？また、コードが失敗したときにIEまたはEdgeコンソールにエラーメッセージが表示されますか？ –
'if（window.ActiveXObject）'が "BROWSER IS IE/EDGE"のようにチェックされているのはナンセンスですが、IE 11とEdgeのどちらもそのチェックには当てはまりません。 –
Chrome、Firefox、およびEdgeの場合、http://plnkr.co/edit/Neqn90as6h9wUGg5qWNC?p=previewで使用されている方法を使用できます。 –