0

0

如何在浏览器端使用JavaScript和XSLT进行转换

月夜之吻

月夜之吻

发布时间:2026-02-16 10:10:02

|

695人浏览过

|

来源于php中文网

原创

xsltprocessor 是现代浏览器唯一原生支持的 xslt 处理方案,仅限同源 xml/xslt 文件,要求输入为 application/xml 解析的 document,输出可选 transformtofragment(推荐用于 dom 插入)或 transformtodocument,并支持通过 setparameter 注入字符串参数。

如何在浏览器端使用javascript和xslt进行转换

浏览器XSLTProcessor 是唯一可行的原生方案

现代浏览器(Chrome、Firefox、Safari、Edge)都支持 XSLTProcessor API,但仅限于同源 XML + XSLT 文件,且不支持 xsl:import / xsl:include 中的跨域引用。它不能处理字符串形式的 XSLT(除非先解析为 Document),也不能直接作用于 HTML 文档树——输入必须是 XMLDocumentDocument(且被当作 XML 处理)。

常见错误现象:XSLTProcessor.importStylesheet() 报错 “NotSupportedError: Cannot import stylesheet from non-XML document”,通常是因为传入了用 DOMParser 解析 HTML 字符串得到的 Document(MIME 类型不是 application/xmltext/xml)。

  • 确保 XSLT 文件响应头含 Content-Type: application/xmltext/xml
  • fetch(url).then(r => r.text()).then(str => new DOMParser().parseFromString(str, "application/xml")) 加载 XSLT
  • XML 源也必须用相同 MIME 类型解析,例如:new DOMParser().parseFromString(xmlStr, "application/xml")
  • 若 XML 字符串含 <?xml version="1.0"?>,确保开头无 BOM 或空白字符,否则 parseFromString 可能静默失败

transformToFragmenttransformToDocument 的选择逻辑

二者决定输出形态:transformToFragment 返回 DocumentFragment(适合插入到现有 HTML 节点),transformToDocument 返回新 XMLDocument(需再用 document.adoptNodeinnerHTML 渲染)。

性能影响:若目标是更新页面某区域,优先用 transformToFragment;若需进一步遍历结果节点(如绑定事件),transformToFragment 更轻量,避免额外文档对象创建。

立即学习Java免费学习笔记(深入)”;

拍客piikee竞拍系统
拍客piikee竞拍系统

拍客竞拍系统是一款免费竞拍网站建设软件,任何个人可以下载使用,但未经商业授权不能进行商业活动,程序源代码开源,任何个人和企业可以进行二次开发,但不能以出售和盈利为目的。安装方法,将www文件夹里面的所有文件上传至虚拟主机,在浏览器执行http://你的域名/install.php或者直接导入数据库文件执行。本次升级优化了一下内容1,程序和模板完美分离。2,优化了安装文件。3,后台增加模板切换功能。

下载
  • transformToFragment 要求传入一个 Document 实例作为上下文(通常是 document),否则报错 “InvalidAccessError”
  • transformToDocument 返回的 XMLDocument 无法直接 appendChild 到 HTML body,必须先提取子节点或用 innerHTML = doc.documentElement.outerHTML
  • 若 XSLT 输出为 HTML 片段(如 <div><p>...</p></div>),transformToFragment 是最简路径

XSLT 中访问 JavaScript 变量需靠 setParameter 注入

浏览器端 XSLT 不支持直接调用 JS 函数,但可通过 XSLTProcessor.setParameter(null, "name", value) 向 XSLT 的 xsl:param 注入值。注意:参数类型固定为字符串,数字/布尔/对象都会被强制转为字符串。

使用场景:动态控制模板分支(如 <if test="$debug = 'true'">...</if>)、替换占位符(<value-of select="$base_url"></value-of>)。

  • XSLT 中必须显式声明 <param name="base_url">,否则 setParameter 无效
  • 参数名区分大小写,且不能含连字符(-)或空格
  • 若需传入数组或结构化数据,建议 JSON.stringify 后在 XSLT 中用 substring-before 等函数解析(不推荐复杂逻辑)
  • 多次调用 setParameter 会覆盖前值,无批量设置方法
const xslt = `<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:param name="title" />
  <xsl:template match="/">
    <h1><xsl:value-of select="$title"/></h1>
  </xsl:template>
</xsl:stylesheet>`;

const xml = `<root/>`;
const xsltDoc = new DOMParser().parseFromString(xslt, "application/xml");
const xmlDoc = new DOMParser().parseFromString(xml, "application/xml");

const processor = new XSLTProcessor();
processor.importStylesheet(xsltDoc);
processor.setParameter(null, "title", "Hello from JS");

const resultFragment = processor.transformToFragment(xmlDoc, document);
document.body.appendChild(resultFragment);

兼容性边界容易被忽略:IE 完全不支持 XSLTProcessor(它用旧版 MSXML),而 Safari 对 transformToFragmentDocument 上下文检查更严格——若传入 shadow root 内的 document,可能失败。真实项目中,建议对 typeof XSLTProcessor !== 'undefined' 做降级处理(如改用纯 JS 模板)。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

953

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

779

2023.11.06

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

1564

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

390

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

982

2025.04.24

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

244

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

746

2024.03.01

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

813

2023.08.22

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

145

2026.02.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号