Прочитать локальный XML с помощью JS

Question

На данный момент из-за security policy Chromium не удается прочитать локальные файлы через ajax без --allow-file-access-from-files. Но в настоящее время мне нужно создать веб-приложение, где база данных представляет собой 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

использование document.implementation.createDocument("", "", null)

вместо new ActiveXObject('Microsoft.XMLDOM').

Вы можете найти API через GOOGLE. Удачи.

Answer 2

Если я правильно понимаю, поставляемый продукт предназначен для локального запуска, поэтому вы не сможете установить флаги для локального доступа к файлам на машине пользователя. Что-то, что я сделал в крайнем случае, это собрать его как исполняемый файл с чем-то вроде nw.js и сохранить внешние файлы данных. В противном случае вы, вероятно, смотрите на загрузку как скрипт, используя схему JSON в JS-файле.

Answer 3

У меня была аналогичная проблема раньше. Я решил просто вставить XML-файл в HTML с помощью PHP. Поскольку приложение загружается локально с диска, размер, кеш и т. Д., Это не вызывает беспокойства.

Если вы используете Webpack, вы можете напрямую импортировать файл с помощью загрузчика, такого как this или this, и в этом случае файл будет включен в полученный в комплекте javascript.

Answer 4

file: Доступ к протоколу при использовании хрома XMLHttpRequest() или <link> элемента без --allow-file-access-from-files флага, установленного при запуске экземпляра хрома не включен по умолчанию.

--allow-file-access-from-files

По умолчанию файл: // URI, не может читать другой файл: // URI. Это переопределение для разработчиков, которым требуется старое поведение для тестирования.

---

В настоящее время, в связи с политикой безопасности Chromium не может читать локальные файлы через AJAX без --allow-file-access-from-files. Но мне нужно создать веб-приложение, где база данных представляет собой xml-файл (в крайнем случае, json), расположенный в одном каталоге с index.html. Понятно, что пользователь может запустить это приложение локально. Существуют ли способы обхода файла xml- (json-), без , обертывания его в функцию и изменения на расширение js?

Если пользователь знает, что локальные файлы, которые будут использоваться приложением вы можете использовать <input type="file"> элемент для пользователя, чтобы загрузить файл из локальной файловой системы пользователя, файл процесс с помощью FileReader, а затем приступить к применению.

Else, сообщите пользователю, что для использования приложения требуется запуск хрома с установленным флагом --allow-file-access-from-files, который можно сделать, создав для этого пусковую установку, указав другой каталог данных пользователя для экземпляра хрома. Ракета-носитель может быть, например

/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 

удалить папку конфигурации для экземпляра хрома.

После того, как флаг установлен, пользователь может включать в себя <link> элемента с атрибутом rel="import" и 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.

См

• How to use webkitRequestFileSystem at file: protocol
• jQuery File Upload Plugin: Is possible to preserve the structure of uploaded folders?
• How to Write in file (user directory) using JavaScript?

Или создать или изменить хром приложение и использовать

chrome.fileSystem 

Se e 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 5

Вы можете загрузить XML через строку текста с помощью DOMParser, Просто загрузите файл и разобрать текст с помощью .parseFromString. Вы можете использовать оператор if, содержащий (window.DOMParser), чтобы проверить, поддерживается ли DOMParser