如何在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'); });