用JS读本地XML

目前,由于安全策略,Chromium无法通过ajax读取本地文件,而无需--allow-file-access-from-files 。 但是我现在需要创build一个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); */ } } } 

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

--allow-file-access-from-files

默认情况下,file:// URIs不能读取其他文件:// URI。 对于那些需要旧的testing行为的开发者来说,这是一个优先考虑。


目前,由于安全策略,Chromium无法通过ajax读取本地文件,而无需--allow-file-access-from-files 。 但是我现在需要创build一个Web应用程序,其中的数据库是一个xml文件(在极端的情况下,json),位于一个具有index.html的目录中。 据了解,用户可以在本地运行该应用程序。 有读取xml-(json-)文件的变通方法,没有包装在一个函数中,并改变为js扩展?

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

否则,build议用户使用应用程序需要使用--allow-file-access-from-files标志设置来启动铬,可以通过为此创build启动程序来指定铬的实例的不同用户数据目录。 例如,发射器可以是

 /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 

不用创build桌面启动器; 铬的实例何时closures运行

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

去除铬的实例的configuration文件夹。

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

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

请参阅有没有办法知道链接/脚本是否仍然挂起或失败 。


另一个select,尽pipe更多的涉及,将使用requestFileSystem来存储文件在LocalFileSystem

看到

  • 如何在file:protocol下使用webkitRequestFileSystem
  • jQueryfile upload插件:可以保留上传文件夹的结构吗?
  • 如何使用JavaScript写入文件(用户目录)?

或者创build或修改一个Chrome应用程序并使用

 chrome.fileSystem 

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


最简单的方法是通过肯定的用户行为来提供file upload的手段; 处理上传的文件,然后继续应用程序。

 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> 

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

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

你可以通过GOOGLEfindAPI。 祝你好运。

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

我以前有过类似的问题。 我通过简单地使用PHP将XML文件embedded到HTML中解决了这个问题。 由于应用程序是从磁盘本地加载的,所以不需要考虑大小,caching等。

如果你使用的是Webpack,你可以直接使用像这样或者这样的加载器来导入文件,在这种情况下,文件被包含在生成的绑定的javascript中。

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