0

自分だけが使う開発用(一般に公開の予定はないのでセキュリティはあまり気にしてない)のホームページにおいて、ページと同じフォルダ内にあるテキストファイル(.txt)の中身をJavaScriptで値として取得したい思っています。なお、ファイル選択ダイアログを開いて選択するのではなく、ページを開けば自動的にJSに取得されるようにしたいです。

今試している方法としては、テキストファイル(.txt)をオブジェクト?としてそのhtmlの中に静的に埋め込んでおいて、ある処理が終わった後にJSで取得するという方法です。

aaa.txt

Hello World!

bbb.html

<!DOCTYPE html>
    <html>
        <head><title>BBB</title></head>
        <body>
        <OBJECT type="text/plain" data="aaa.txt" id="target-text"></OBJECT>
        <script type="text/javascript">
            //別の処理を数秒間した後に↓(ページにaaa.txtの中身が描写されている段階)

            //contentDocumentがnullとエラー
            var targetText = document.getElementById("target-text").contentDocument.documentElement.textContent;
        </script>
    </body>
    </html>

このコードのどこを直すと動作するでしょうか?
それか、別の手段があれば教えていただきたいです。(AJAXとか難しそうなやり方じゃないと助かります)

1 件の回答 1

0

Fetchを使った方法を以下に示します。非同期通信、Promise(.then)やasync/awaitが絡んでくるので、ちょっと「難しそう」ですね。使うだけなら一番目の例で十分です。

// .thenでつなげる
fetch('aaa.txt')
  .then(function (response) {
     return response.text();
  })
  .then(function (txt) {
     console.log(txt);  //=> Hello World!
  });

// 省略した書き方にすると…
fetch('aaa.txt')
  .then(response => response.text())
  .then(txt => console.log(txt)); //=> Hello World!


// もしくは async/await を使って
var f = async () => {
  var k = await fetch('aaa.txt');
  var txt = await k.text();
  console.log(txt); //=> Hello World!
};
f();

// varをconstにして、f()を省略すると…
(async () => {
  const k = await fetch('aaa.txt');
  const txt = await k.text();
  console.log(txt); //=> Hello World!
})();

1,2番目の例についてさらっと説明してみます。これは、fetch('aaa.txt')で「aaa.txtを取ってきて」と頼んで、.then(〇〇)で「終わったら〇〇やっといて」と付け加えるイメージです。単に、

fetch('aaa.txt');
〇〇

と続けて書くと、fetchが終わるのを待たずした〇〇が実行されます。当然この段階ではaaa.txtの内容がわからないので、〇〇の処理がうまくできません。「fetchが終わったら」という意味を表現するために.thenを使うということです。


object要素を使った方法を試してみましたが、エラーも出ず普通に動作してしまいました(逆に.addEventListener("load")などをつけてみると質問にあるようにエラーが出た)。こちらについてはわからないので、他の方に回答を委ねます。Chromeの場合、--allow-file-access-from-filesが関係するかもしれません。

4
  • 回答有り難うございした。説明が不足していて申し訳ありませんが、ローカル環境でも使うことがあるため、ローカルでも動くコードだと助かります。示していただいたコード(Fetch)について、オンラインでは作動しました。ただ、Objectはブラウザを変えても動作しないので、相変わらず謎です。
    – nomo
    Commented 2020年9月6日 5:06
  • Objectについてもオンラインだと動作しました。クロスドメインの問題のようですね。もう少しいろいろ試してみます。
    – nomo
    Commented 2020年9月6日 5:40
  • @nomo 「ローカル」が、 file://スキームでHTMLを開いてエラーになるという意味でしたら、qiita.com/sudahiroshi/items/e74d61d939f18779970d にあるようなワンライナーで簡易的なWebサーバを立ててhttp://でアクセスしてみるとよいと思います。
    – sei0o
    Commented 2020年9月6日 8:12
  • 簡易サーバーのアクセスで問題なくできました。アドバイスありがとうございました。
    – nomo
    Commented 2020年9月6日 9:56

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。