使用 XSLT 编写 DHTML答案

【问题标题】：Writing DHTML with XSLT使用 XSLT 编写 DHTML
【发布时间】：2020-08-12 09:04:01
【问题描述】：

HTML 是由 XSLT 编写的。

作为一名业余 XSLT 开发人员
我想将 javascript 块写入 HTML（头部或正文）
以便在呈现 HTML 时执行脚本（瞧瞧，DHTML）。

我知道如何在 XSLT 本身中使用脚本，但不知道 XSLT 如何将脚本块写入 DHTML。我知道如何手动编写 HTML，但我当然希望 XSLT 完成繁重的工作。

下面的代码是我期望的，但没有。它只是在页面头部显示代码。

<head>
    <title>My HTML</title>
    <msxsl:script type="text/javascript" version="1.3">
        <![CDATA[
            var coll = document.getElementsByClassName("collapsible");
            var i;

            for (i = 0; i < coll.length; i++) {
                coll[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var content = this.nextElementSibling;
                if (content.style.display === "block") {
                    content.style.display = "none";
                    } else {
                    content.style.display = "block";
                    }
                });
            }
        ]]>
    </msxsl:script>
</head>

Script is displayed as text

这是为 NHS 工作的，请多多关照……谢谢。

【问题讨论】：

标签： javascript xslt dhtml

【解决方案1】：

如果您的 XSLT 创建的 HTML 应该包含 HTML script 元素，那么您将按照与使用 head 或 title 元素相同的方式插入它。在 XSLT 中，XSLT 是 XML，您需要确保您的内联 Javascript 代码不会破坏 XML 规则，就像您对 CDATA 部分所做的那样，但 script 元素将是一个普通的 script 元素而不是msxsl:script 元素。

除此之外，使用xsl:output method="html"，没有什么特别的。

值得怀疑的是，您在 head 部分中使用 var coll = document.getElementsByClassName("collapsible"); 并尝试处理该集合的特定代码应该在解析任何元素之前实现，但这是正确使用 Javascript 的问题，也许是事件处理程序或函数调用，而不是内联代码。

根据 XSLT 的执行位置（客户端或服务器），XSLT 和 Javascript 的整个交互可能很脆弱，动态添加脚本，即使没有 XSLT，也可能是跨浏览器的挑战。

【讨论】：

这是一门黑暗的艺术！感谢@Martin Honnen，因为删除“msxml”部分有效。
... 允许将脚本适当地写入 HTML。而现在您对 document.getElementsByClassName 的洞察力现在可能会打击我。当我渲染 HTML 时，会出现脚本错误。我想我也理解你的指导 - 但我可以检查一下吗？你是说让它成为事件处理程序而不是内联？这很响，因为它的想法是在可折叠部分折叠或展开时调用它。
无论如何，无论是在静态 HTML 中还是在 XSLT 生成的 HTML 中使用 Javascript，我都认为您希望在 DOMContentLoaded 事件侦听器中运行代码，例如document.addEventListener('DOMContentLoaded', function() { var coll = document.getElementsByClassName("collapsible"); ... }, false); 以便在有完整的 DOM 以访问您要处理的所有元素时运行它。有些人可能不喜欢使用 DOMContentEvent 侦听器，而是将脚本元素放在正文的最后，但我认为使用事件侦听器更简洁。
谢谢你，Martin - 很有道理，我同意它更干净
您能否在一个新的、单独的问题中提出该问题，在该问题中您告诉我们所有必要的详细信息，例如浏览器、浏览器版本、IE 或 Edge 的文档模式，然后添加最小但完整的 sn-ps 作为代码sn-ps？读取 cmets 中插入的代码有点困难。一般来说，在编写要在 XSLT 生成的 HTML 中使用的 Javascript 时，我会首先尝试在静态 HTML 中开发和测试代码，如果可行，它应该也可以在 XSLT 生成的 HTML 中使用，除非您最终使用 document.write或 Mozilla 不支持的类似内容。