用 JS 读取本地 XML答案

【问题标题】：Read local XML with JS用 JS 读取本地 XML
【发布时间】：2017-05-07 20:51:52
【问题描述】：

目前，由于security policy Chromium 在没有--allow-file-access-from-files 的情况下无法通过ajax 读取本地文件。但我目前需要创建一个 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);
             */
        }

    }
}

【问题讨论】：

如果 cookie 无法为预期用途存储足够的数据，local storage 怎么样？
目前我还不清楚你需要什么，load a xml/json in chrome without function via a plugin or something else?请详细说明一下。
stackoverflow.com/questions/7949752/…的可能重复
@OndrejSvejdar 这个关于读取文件而不是解析 xml 的问题
您是否尝试从本地文件系统获取'./file.xml'，而不使用--allow-file-access-from-files 标志启动铬？或者，您是否尝试在使用XMLHttpRequest 检索文件后解析返回的XML document？

标签： javascript json xml

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果我理解正确，交付物旨在在本地运行，因此您将无法为用户计算机上的本地文件访问设置任何标志。我在紧要关头做的事情是将其打包为带有nw.js 之类的可执行文件，并保留外部数据文件。否则，您可能正在考虑使用 JS 文件中的 JSON 模式作为脚本加载。

【讨论】：

【解决方案3】：

我之前也遇到过类似的问题。我通过简单地将 XML 文件嵌入使用 PHP 的 HTML 来解决。由于应用程序是从磁盘本地加载的，因此大小、缓存等都不是问题。

如果您使用的是 Webpack，则可以改为使用 this 或 this 之类的加载器直接导入文件，在这种情况下，文件将包含在生成的捆绑 javascript 中。

【讨论】：

【解决方案4】：

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

--allow-file-access-from-files

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

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

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

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

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

另见How do I make the Google Chrome flag “--allow-file-access-from-files” permanent?

上面的命令也可以在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

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

一旦设置了标志，用户可以包含带有rel="import"属性的<link>元素，href指向本地文件，type设置为"application/xml"，对于XMLHttpRequest以外的选项来获取文件。访问XMLdocument 使用

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

见Is there a way to know if a link/script is still pending or has it failed。

另一种选择，尽管涉及更多，是使用requestFileSystem 将文件存储在LocalFileSystem。

见

或者创建或修改一个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>

【讨论】：

@VasyaShmarovoz 另见Set Up Persistence with DevTools Workspaces。

【解决方案5】：

您可以使用DOMParser 通过文本字符串加载XML，只需加载您的文件并使用.parseFromString 解析文本。您可以使用包含 (window.DOMParser) 的 if 语句来检查是否支持 DOMParser

【讨论】：