如何在javascript中访问本地XML？

Question

我有一个 html 文件，我在其中保存了一些笔记和其他信息，我经常更新它，所以它变得很大。 这样做的问题是，如果我在布局中更改某些内容，它会变得非常麻烦，因为我必须在很多地方进行更改。 所以我有了想法，将所有数据放入 XML 并将其转换为 HTML 和 XSLT。

这立即让我想到了第一个问题：我无法访问 XML。

我尝试的第一件事是通过 XMLHttpRequest 加载它：

function loadXMLDoc(filename)
{
    if (window.ActiveXObject)
    {
        xhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else
    {
        xhttp = new XMLHttpRequest();
    }
    xhttp.open("GET", filename, false);
    xhttp.setRequestHeader('Content-Type', 'application/xml');
    try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
    xhttp.send("");
    return xhttp.responseXML;
}

但这被“原因：CORS 请求不是 HTTP”阻止。 我知道我为什么会得到它，我也知道在使用 XMLHttpRequest 时很可能无法解决这个问题。 （除了篡改本地浏览器安全性，我不想这样做）。

我的下一个想法是将 XML 作为字符串直接放入脚本中，然后将其解析为 XML 文档。 就像是：

var rawXml = "
<?xml version="1.0" encoding="UTF-8"?>
<foo>
    <bar/>
    <bar/>
</foo>
";

但这给了我一个“未捕获的语法错误：”“字符串文字包含一个未转义的行”。 所以显然 javascript 不支持任何形式的逐字字符串，我必须用 \n 转义所有换行符。 我的问题是，我将放弃漂亮的格式。 所以阅读和编辑 XML 会很痛苦。 这绝对是我想要避免的事情。

编辑：感谢@Taplar 指出，我可以使用模板文字，这使得后一种方法有效。 This solution is not optimal, since I use NotePad++ and I can either use syntax highlighting for HTML or XML, plus XML Tools syntax autocheck gets screwed over by all the HTML code. 但到目前为止，这是我拥有的最好的解决方案。 如果还有其他选择，我想听听！

（正如其他人已经指出使用input type=file ，这对我来说不是真正可行的解决方案。我想打开 HTML 文档并阅读它。但是对于输入元素，我必须首先选择 XML 并选择XSL。这有点麻烦，我更喜欢 xml-as-string 解决方案）

Answer 1

您应该将XMLHttpRequestInstance.responseType设置为'document' ：

 function loadXMLDoc(filename, func){ const x = new XMLHttpRequest; x.open('GET', filename); x.responseType = 'document'; x.onload = d=>{ func(d); } x.send(); return x; } // here's how you would execute loadXMLDoc('yourFile.xml', d=>{ const productNodeList = d.getElementsByTagName('product'); });