使用 XSLT 编写 DHTML
Posted
技术标签:
【中文标题】使用 XSLT 编写 DHTML【英文标题】：Writing DHTML with XSLT 【发布时间】：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 工作的，请多多关照……谢谢。
【问题讨论】：
【参考方案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 不支持的类似内容。以上是关于使用 XSLT 编写 DHTML的主要内容，如果未能解决你的问题，请参考以下文章