JSでローカルXMLを読む

Question

security policy Chromiumのために現時点では、--allow-file-access-from-filesなしでajax経由でローカルファイルを読み取ることができません。しかし、私は現在、データベースがindex.htmlで1つのディレクトリにあるxmlファイル（極端な場合はjson）であるWebアプリケーションを作成する必要があります。ユーザーはこのアプリケーションをローカルで実行できます。 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')。

GOOGLEからAPIを見つけることができます。がんばろう。

Answer 2

私が正しく理解している場合、配布物はローカルで実行されるようになっているため、ユーザーのマシン上のローカルファイルへのアクセスにフラグを設定することはできません。私がピンチでやったことは、nw.jsのようなもので実行可能ファイルとしてパッケージ化し、外部データファイルを保持することです。それ以外の場合は、JSファイルのJSONスキーマを使用してスクリプトとしてロードすることを検討している可能性があります。

Answer 3

私は前に同様の問題がありました。 PHPを使用してXMLファイルをHTMLに埋め込むだけで解決しました。アプリケーションはディスクからローカルにロードされるため、サイズ、キャッシュなどは問題になりません。

Webpackを使用している場合は、代わりにthisまたはthisのようなローダーを使用してファイルを直接インポートすることができます。その場合、そのファイルは結果として得られるバンドルされたjavascriptに含まれます。クロムインスタンスの起動時に設定--allow-file-access-from-filesフラグなしXMLHttpRequest()または<link>要素を使用してクロムでfile:プロトコルへのアクセス

Answer 4

はデフォルトで有効になっていません。

--allow-file-access-from-filesデフォルトで

、ファイル：// URIを：// URIは他のファイルを読み取ることができません。これは、テストのために古い動作が必要な開発者の場合は、 オーバーライドです。セキュリティポリシーにクロムが --allow-file-access-from-filesせずにAJAXを介してローカル ファイルを読み取ることができないため現時点では

---

、。しかし、私は は現在 index.htmlと1つのディレクトリにある xml-ファイル（極端な場合はjson）であるWebアプリケーションを作成する必要があります。ユーザーはこのアプリケーションをローカルで に実行できます。 を関数にラップしてjs拡張子に変更せずにxml-（json-）ファイルを読むための回避策がありますか？ユーザーはローカルファイルを使用すると、ユーザーのローカルファイルシステム、FileReaderを使用して、プロセスファイルからファイルをアップロードするユーザーのための<input type="file">要素を利用することができ、アプリケーションによって使用されるべきであることを認識している場合

、そのアプリケーションを続行。

また、フラグが設定されたクロムを起動する必要があることをアプリケーションに伝えるには、この目的のためのランチャーを作成し、クロムのインスタンスに別のユーザーデータディレクトリを指定します。ランチャーは、上記のコマンドは、デスクトップランチャーを作成せずにterminal

$ /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?

例えば

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

を参照してください、である可能性があります。ここでクロムのインスタンスが閉じられると、クロムのインスタンスのコンフィグレーションフォルダを削除するには、

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

を実行します。フラグが設定されたら

は、ユーザーがファイルを取得するXMLHttpRequest以外のオプションについてrel="import"属性を持つ<link>要素とローカルファイルへhrefポインティングと"application/xml"にtypeセットを含めることができます。

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

を使用してアクセスXMLdocumentはIs there a way to know if a link/script is still pending or has it failedを参照してください。

---

もう一つの選択肢は、しかしより複雑な、LocalFileSystemでファイルを保存するためにrequestFileSystemを使用することです。

• 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アプリを作成または変更を参照してください

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

あなたは自分のファイルをロードし、.parseFromStringを使用してテキストを解析し、DOMParserを使用してテキストの文字列を通じてXMLを読み込むことができます。 (window.DOMParser)を含むifステートメントを使用して、DOMParserがサポートされているかどうかを確認することができます