用JS读取本地XML

Question

用JS读取本地XML目前，由于安全策略，Chromium无法通过ajax读取本地文件--allow-file-access-from-files。但我目前需要创建一个Web应用程序，其中数据库是一个xml文件（在极端情况下为json），位于一个带有index.html的目录中。可以理解，用户可以在本地运行该应用程序。是否有解决xml-（json-）文件的解决方法，而不将其包装在函数中并更改为js扩展名？loadXMLFile('./file.xml').then(xml => {     // working with xml }); function loadXMLFile(filename) {     return new Promise(function(resolve, reject) {         if('ActiveXObject' in window) {             // If is IE             var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');             xmlDoc.async = false;             xmlDoc.load(filename);             resolve(xmlDoc.xml);         } else {             /*              * how to read xml file if is not IE?              * ...              * resolve(something);              */         }     } }

Answer 1

默认情况下，未启用在铬实例启动时file:使用铬XMLHttpRequest()或使用<link>无--allow-file-access-from-files标记设置访问协议。

--allow-file-access-from-files

默认情况下，file：// URIs无法读取其他file：// URI。这是对需要旧行为进行测试的开发人员的覆盖。

---

目前，由于安全策略，Chromium无法通过ajax读取本地文件--allow-file-access-from-files。但我目前需要创建一个Web应用程序，其中数据库是一个xml文件（在极端情况下为json），位于一个带有index.html的目录中。可以理解，用户可以在本地运行该应用程序。是否有解决xml-（json-）文件的解决方法，而不将其包装在函数中并更改为js扩展名？

如果用户知道应用程序将使用本地文件，则可以使用<input type="file">元素供用户从用户本地文件系统上载文件，使用处理文件FileReader，然后继续应用程序。

否则，建议用户使用应用程序需要启动带有--allow-file-access-from-files标志集的铬 ，这可以通过为此目的创建启动器来完成，为chrome实例指定不同的用户数据目录。例如，发射器可以是

/usr/bin/chromium-browser --user-data-dir="/home/user/.config/chromium-temp" --allow-file-access-from-files

另请参阅如何使Google Chrome标记“ - allow-file-access-from-files”永久保留？

上面的命令也可以在 terminal

$ /usr/bin/chromium-browser --user-data-dir="/home/user/.config/chromium-temp" --allow-file-access-from-files

没有创建桌面启动器; 当铬的实例关闭时

$ rm -rf /home/user/.config/chromium-temp

删除chrome实例的配置文件夹。

设置标志后，用户可以包含<link>带rel="import"属性的元素并href指向本地文件并type设置为"application/xml"，XMLHttpRequest以获取除获取文件之外的选项。访问XML document使用

const doc = document.querySelector("link[rel=import]").import;

请参阅有没有办法知道链接/脚本是否仍处于挂起状态或是否已失败。

---

另一个替代方案，即更多涉及，将requestFileSystem用于存储文件LocalFileSystem。

看到

• 如何在file：protocol中使用webkitRequestFileSystem

• jQuery文件上传插件：是否可以保留上传文件夹的结构？

• 如何使用JavaScript写入文件（用户目录）？

或者创建或修改Chrome应用程序并使用

chrome.fileSystem

请参阅GoogleChrome / chrome-app-samples / filesystem-access。

---

最简单的方法是通过肯定的用户动作提供文件上传的手段; 处理上传的文件，然后继续申请。

const reader = new FileReader;const parser = new DOMParser;const startApp = function startApp(xml) {
  return Promise.resolve(xml || doc)};const fileUpload = document.getElementById("fileupload");const label = document.querySelector("label[for=fileupload]");const handleAppStart = function handleStartApp(xml) {
  console.log("xml document:", xml);
  label.innerHTML = currentFileName + " successfully uploaded";
  // do app stuff}const handleError = function handleError(err) {
  console.error(err)}let doc;let currentFileName;reader.addEventListener("loadend", handleFileRead);reader.addEventListener("error", handleError);function handleFileRead(event) {
  label.innerHTML = "";
  currentFileName = "";
  try {
    doc = parser.parseFromString(reader.result, "application/xml");
    fileUpload.value = "";

    startApp(doc)
    .then(function(data) {
        handleAppStart(data)
    })
    .catch(handleError);
  } catch (e) {
    handleError(e);
  }}function handleFileUpload(event) {
  let file = fileUpload.files[0];
  if (/xml/.test(file.type)) {
    reader.readAsText(file);
    currentFileName = file.name;
  }}fileUpload.addEventListener("change", handleFileUpload)

<input type="file" name="fileupload" id="fileupload" accept=".xml" /><label for="fileupload"></label>

Answer 2

使用 document.implementation.createDocument("", "", null)

而不是new ActiveXObject('Microsoft.XMLDOM')。

您可以通过GOOGLE找到API。祝好运。

Answer 3

如果我理解正确，那么可交付成果将在本地运行，因此您将无法在用户的计算机上设置任何本地文件访问标志。我在紧要关头做的事情就是把它打包成一个像nw.js这样的可执行文件并保存外部数据文件。否则，您可能正在使用JS文件中的JSON模式来加载脚本。