如何用JavaScript在新窗口以浏览器原生格式展示XML字符串

嘿，我懂你想要的那种原生XML查看体验——就是像双击打开本地XML文件那样，让浏览器自动给你格式化、折叠节点，对吧？你之前试的window.open加data URL的路子可能栽在了编码或者兼容性上，我给你两个实用的解决方案：

1. 使用Blob创建Object URL（首推） #

这个方法能完美模拟打开本地XML文件的效果，还能处理大体积的XML内容，浏览器支持也很广泛。代码示例：

// 先获取你的XML字符串
const xmlString = document.getElementById("xmlDivContent" + name).innerText;
// 创建Blob对象，明确指定MIME类型为XML
const xmlBlob = new Blob([xmlString], { type: 'text/xml;charset=utf-8' });
// 生成临时的Object URL
const xmlUrl = URL.createObjectURL(xmlBlob);
// 打开新窗口展示XML
const xmlViewerWindow = window.open(xmlUrl, '_blank');
// 窗口关闭后记得释放URL，避免内存泄漏
xmlViewerWindow?.addEventListener('unload', () => {
  URL.revokeObjectURL(xmlUrl);
});

浏览器会自动识别这是XML内容，直接启用原生的格式化查看器，和你打开本地XML文件的效果一模一样。

2. 修复Data URL的编码问题 #

如果你更倾向于用data URL的方式，那大概率是之前的字符串没正确编码导致浏览器无法识别。试试对XML字符串做URI编码：

const xmlString = document.getElementById("xmlDivContent" + name).innerText;
// 对XML字符串进行URI编码，处理特殊字符
const encodedXml = encodeURIComponent(xmlString);
// 拼接成data URL并打开
window.open(`data:text/xml;charset=utf-8,${encodedXml}`, '_blank');

不过要注意，data URL有长度限制，当XML内容比较大的时候可能会失效，所以还是第一个方法更靠谱。

额外注意事项 #

• 确保你的XML字符串是格式完全正确的XML，如果有语法错误（比如未闭合的标签），浏览器可能只会显示纯文本而不是原生查看器。
• 部分浏览器的弹出窗口拦截设置可能会阻止新窗口打开，记得检查一下相关设置。

内容的提问来源于stack exchange，提问作者Will Knight