70175


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

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

**aaa.txt**

[code]

    Hello World!
    
[/code]

**bbb.html**

[code]

    <!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>
    
[/code]

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


CC BY-SA 4.0
2020-09-05T07:58:53.460
70157
2020-09-06T00:09:37.490
2020-09-05T08:04:43.323
41777
41777
question
javascript html
Htmlに埋め込んだテキストファイルをJavaScriptで取得したい


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

[code]

    // .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!
    })();
    
[/code]

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

[code]

    fetch('aaa.txt');
    〇〇
    
[/code]

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

* * *

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


CC BY-SA 4.0
2020-09-06T00:09:37.490
70175
2020-09-06T00:09:37.490
7500
70157
answer