加载 XML、应用 XSL 并附加到现有的 HTML 页面答案

【问题标题】：Load XML, apply XSL and append to existing HTML page加载 XML、应用 XSL 并附加到现有的 HTML 页面
【发布时间】：2021-06-07 14:03:45
【问题描述】：

在已经加载的 HTML 页面上，我想加载一个 XML 文件并将生成的 HTML 附加到加载的页面。 XML 文件与 XSL 文件链接。当我在浏览器 (Firefox) 中打开它时，正确应用了 XSL 转换。结果是没有 html、head 和 body 标签的 HTML。这就是我想要的。

使用 Ajax 加载 XML 给我的是未转换的 XML，而不是我想要的 HTML。

到目前为止，我的解决方法是将 XML 文件加载到隐藏的 iframe 中。 XSL 转换在那里正确执行。

我现在无法从 iframe 复制 HTML 并将其附加到 iframe 外部页面中的现有 div。我只能：

获取 HTML 集合（使用 jquery 或纯 JS）：

iframe = $('#iframe');
iframeHtml = iframe.contents()[0].children;

iframe = document.getElementById('bausteine__liste__zwischenspeicher');
resultHtml = iframe.contentDocument || temp.contentWindow.document;

获取所有 HTML，但仅从第一个 div 下方开始（使用 jquery）。包含所有内容的最上面的 div 被省略。

iframe = $('#iframe');
resultHtml = iframe.contents().find('div').html();

这是我在 Firefox 的开发工具栏中看到的 iframe

<iframe id="iframe" src="file-with-xslt.xml">
    <div class="uppermost-element">
        <div>
            …
        </div>
        <div>
            …
        </div>
    </div>
</iframe>

如何获取包含最上面元素的 HTML？通过 iframe 或者——甚至更好——通过 Ajax。感谢您的帮助！

【问题讨论】：

标签： javascript html xml iframe htmlcollection

【解决方案1】：

解决方案是使用 XMLHttpRequest 加载 XML 和 XSL，并使用 Javascript 进行转换。 documentElement.outerHTML 将输出生成的 HTML。

function XMLtransformation(xsl, xml) {

    var xslStylesheet;
    var xsltProcessor = new XSLTProcessor();                    
    var xmlDoc;                    
    
    // load XSL file
    var myXMLHTTPRequest = new XMLHttpRequest();
    myXMLHTTPRequest.open('GET', urlXSL, false);
    myXMLHTTPRequest.send(null);
    
    xslStylesheet = myXMLHTTPRequest.responseXML;
    xsltProcessor.importStylesheet(xslStylesheet);
    
    // load XML file
    myXMLHTTPRequest = new XMLHttpRequest();
    myXMLHTTPRequest.open('GET', urlXML, false);
    myXMLHTTPRequest.send(null);
    
    xmlDoc = myXMLHTTPRequest.responseXML;
    
    var htmlDocument = xsltProcessor.transformToDocument(xmlDoc, document);

    return htmlDocument.documentElement.outerHTML;

}

XMLtransformation('file.xsl', 'file.xml');

【讨论】：