社内のNASにある巨大なログファイルの検索ツールを作る必要が生じました。
JavaScriptでやってみよう、と軽い気持ちで10数年ぶりにJSに着手。
しかし社内の見えない壁により、社内・クラウドともWebサーバーを立てることが事実上不可能でした。
本来ここであきらめて別の手法を探すべきですが…
とりあえずファイルを読み込んでブラウザのエンジンで処理ができれば良いので、XHRを使ってファイルを読み込んでみます。
main.html
<!DOCTYPE html>
<html lang="ja"><head><meta charset="UTF-8"></head>
<body>
<script type="text/javascript">
const xhr = new XMLHttpRequest();
var data;
window.onload = function onLoad() {
xhr.open('GET', './data/test.txt', false); // GETでローカルファイルを開く
xhr.onload = () => {
data = xhr.responseText;
};
xhr.onerror = () => {
console.log("error!");
};
xhr.send();
cts1 = document.getElementById("cts1");
cts1.innerText = data;
}
</script>
<div class="contents" id="cts1"></div>
</body>
</html>
以下のブラウザで動作確認しました。
- Firefox Quantam 62.0.3
- Chrome 69.0.3497.100
- Microsoft Edge 42.17134.1.0
Chromeは起動時に以下のオプションを付けないと動きませんでした。
- --allow-file-access-from-files ・・・file://を使えるようにする
- --disable-web-security ・・・別フォルダのファイルにアクセス可とする
- --user-data-dir ・・・同上
FireFoxでは、ローカルのリモートのファイルを読み込む場合、設定を変える必要があります。
about:configを開き、
- strict_origin_policy = True(既定値) → False
（セキュリティをゆるゆるにするオプションなので使用は充分慎重に。）
こちらの記事などを参考にしました。
（↑こちらの記事にかかれているより各ブラウザともすんなり動いた印象です。なにか見落としがあるのかもしれません）
（追記）
xhrで戻ってくる文字列は何もしないとunicodeで戻ってきます。
SJISのファイルを読み込む場合
xhr.overrideMimeType("text/plain; charset=Shift_JIS");
とするとSJISで戻ってきます。
（ただし、Edgeは常にunicodeで帰ってきます…困った）