Czytaj lokalny XML z JS

Question

W tej chwili ze względu na security policy Chromium nie można odczytać lokalnych plików przez ajax bez --allow-file-access-from-files. Ale obecnie potrzebuję stworzyć aplikację internetową, w której bazą danych jest plik xml (w skrajnym przypadku json), umieszczony w jednym katalogu z index.html. Rozumie się, że użytkownik może uruchomić tę aplikację lokalnie. Czy są jakieś obejścia do czytania pliku xml- (json-), bez owijania go w funkcję i zmiany na rozszerzenie 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

użycie document.implementation.createDocument("", "", null)

zamiast new ActiveXObject('Microsoft.XMLDOM').

Możesz znaleźć API poprzez GOOGLE. Powodzenia.

Answer 2

Jeśli dobrze rozumiem, element dostarczany jest uruchamiany lokalnie, więc nie będzie można ustawić żadnych flag dla lokalnego dostępu do plików na komputerze użytkownika. Coś, co zrobiłem w szczyptę, to spakować go jako plik wykonywalny z czymś takim jak nw.js i przechowywać zewnętrzne pliki danych. W przeciwnym razie prawdopodobnie chcesz załadować jako skrypt przy użyciu schematu JSON w pliku JS.

Answer 3

Miałem podobny problem wcześniej. Rozwiązałem po prostu osadzając plik XML w kodzie HTML za pomocą PHP. Ponieważ aplikacja jest ładowana lokalnie z dysku, rozmiaru, pamięci podręcznej itp., Nie stanowi to problemu.

Jeśli używasz Webpacka, możesz zamiast tego bezpośrednio zaimportować plik za pomocą programu ładującego, takiego jak this lub this, w którym to przypadku plik zostanie dołączony do wynikowego pakietu javascript.

Answer 4

Dostęp protokół file: przy użyciu XMLHttpRequest() chromu lub <link> elementu bez --allow-file-access-from-files flagę ustawioną na przykład chrom premiery nie jest domyślnie włączona.

--allow-file-access-from-files

Domyślnie file: // URI nie może czytać inne file: // URI. Jest to nadpisanie dla programistów, którzy potrzebują starego zachowania do testowania.

---

W chwili obecnej, ze względu na politykę bezpieczeństwa Chromium nie może odczytać lokalnych plików za pośrednictwem AJAX bez --allow-file-access-from-files. Ale I obecnie trzeba utworzyć aplikację internetową, w której bazą danych jest plik xml- (w skrajnym przypadku, json), umieszczony w jednym katalogu z index.html. Rozumie się, że użytkownik może lokalnie uruchomić tę aplikację. Czy są jakieś obejścia do odczytu pliku xml- (json-), bez zawijania go w funkcję i zmiany na rozszerzenie js?

Jeśli użytkownik jest świadomy, że lokalne pliki mają być używane przez aplikację można wykorzystać <input type="file"> element dla użytkownika, aby przesłać plik z lokalnego systemu plików użytkownika, plik proces wykorzystujący FileReader, a następnie przystąpić do aplikacji.

Ewentualnie, należy poinformować użytkownika, że ​​korzystanie z aplikacji wymaga uruchomienia chromu z zestawem flag --allow-file-access-from-files, co można wykonać, tworząc w tym celu program uruchamiający, określając inny katalog danych użytkownika dla wystąpienia chromu. Wyrzutnia może być, na przykład

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

Patrz także How do I make the Google Chrome flag “--allow-file-access-from-files” permanent?

Powyższe polecenie może być również prowadzony w terminal

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

bez tworzenia wyrzutnię pulpitu; gdzie, gdy przypadek chromu jest zamknięty, usuń katalog konfiguracyjny dla wystąpienia chromu.

Gdy flaga jest ustawiona, użytkownik może zawierać <link> element z atrybutem rel="import" i href wskazując do lokalnego pliku i type zestaw do "application/xml", na opcję inną niż XMLHttpRequest uzyskania pliku. Dostęp XMLdocument użyciu

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

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

---

Inną alternatywą, choć bardziej zaangażowani, byłoby wykorzystanie requestFileSystem aby zapisać plik na LocalFileSystem.

Zobacz

• 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?

albo utworzyć lub zmodyfikować aplikację Chrome i użyć

chrome.fileSystem 

Se e GoogleChrome/chrome-app-samples/filesystem-access.

---

Najprostszym rozwiązaniem byłoby zapewnienie sposobu przesyłania plików przez pozytywne działanie użytkownika; przetwarzać przesłany plik, a następnie kontynuować korzystanie z aplikacji.

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

można załadować XML przez ciąg tekstu przy użyciu DOMParser, Wystarczy załadować plik i analizowania tekstu przy użyciu .parseFromString. Możesz użyć instrukcji if zawierającej (window.DOMParser), aby sprawdzić, czy DOMParser jest obsługiwany.