Question

目前，由于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);
             */
        }

    }
}

Answer 1

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

--allow-file-access-from-files

默认情况下，file：// URIs无法读取其他文件：// 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，这可以通过为此目的创建启动器来完成，为chrome实例指定不同的用户数据目录。发射器可以是，例如

/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

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

设置好标记后，用户可以添加<link>元素，rel="import"属性，href指向本地文件，type设置为"application/xml"， XMLHttpRequest以外的选项来获取文件。使用

访问XML document

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>

Answer 2

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

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

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

Answer 3

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

Answer 4

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

如果你正在使用Webpack，你可以使用像this或this之类的加载器直接导入文件，在这种情况下，文件会包含在生成的捆绑的javascript中。

Answer 5

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

用JS读取本地XML

5 个答案: