・HTMLで外部ファイルを読み込みたい
HTMLで、外部のテキストファイルを読み込みたい時…
例えば以前に書いたエントリ（JavaScriptによるDB「AlaSQL」）のように、SQLをJavaScriptで実行する場合など、SQLをテキストファイルで置いておけば取り回しが効きやすいのではないかと考えました。
・FILEAPIを使えば…？
ファイルを読み込むといってパッと思いつくのは、HTML5で追加されたFILEAPIだと思います。
FILEAPIの使い方を調べると、FILEタグからファイル選択ダイアログを立ち上げ、選択したファイルを読み込む、という手順が紹介されている場合が標準的かと思います。
ただ、このファイル選択を行う方法だと、実行時に操作者が読み込むファイルを適宜指定してやる必要があるため、要件によっては適さない場合があるかと思います。
今回の私の場合などがその例で、画面表示などのイベント発生時にDBから自動でデータを読み込みたいと考えていました。
というところで、今回私が目指したのは、「画面表示時に自動で読み込まれる」「ローカルで実行する」という二つの要件を満たすことでした。
・ところが…
最初はonLoadイベントをこねくり回したり、色々と試していた…のですが、
ところがここで一つ壁に当たってしまいました。セキュリティ上の制約です。
自動で読み込ませるにはファイルの場所を指定してやる必要がありますが、ブラウザのセキュリティ制約により任意のローカルパスのファイルの読み込みを行おうとしてもブロックされてしまうようでした。
たしかに何でもかんでも自動で読み込んでしまえるというのは、非常にマズいというのは想像がつきます。
・試行錯誤した結果…
試行錯誤した結果、読み込む対象のファイルを実行するHTMLと同フォルダ、または下層のフォルダ配下に配置することによって、セキュリティ制約を回避することが出来る、ということが分かりました。（IE11、Edge、FireFox57.0で試した限りは可能でしたが、ブラウザに依存するのではないかと思われます。）
自分が実現したいことは出来るので、この方法を採用することにしました。
そして最終的に、
<object id="sqltext" data="sql.txt" type="text/plain" style="display:none"></object>
<script>
var obj = document.getElementById("sqltext");
obj.onload = function() {
var loadtext = obj.contentDocument.documentElement.textContent;
alert(loadtext);
}
</script>
このように実は読み込むだけならobjectでアクセスできてしまうという事が分かってしまいました。
セキュリティの制限に苦しめられた一方で、またJavaScriptの別種のおおらかさを感じる一件でした。
