私の JavaScript コードがローカル テキスト ファイルを読み取れないのはなぜですか?それを修正するにはどうすればよいですか?

ブラウザでのローカル テキスト ファイルの読み取りのトラブルシューティング

基本的なテキスト ファイル リーダーを作成するために、JavaScript 関数が開発されました。ファイル パス内の各行を文字配列に解析しましたが、エラーが発生しました。この記事は、これらの問題を診断して解決することを目的としています。

エラー診断

最初、コードはファイルのパスを正常に取得したにもかかわらず、テキスト コンテンツを表示できませんでした。デバッグの際、XMLHttpRequest オブジェクトがローカル ファイル アクセスを正しく処理していないことが判明しました。

Firefox に変更すると成功した結果が得られ、ブラウザ固有の問題の可能性が浮き彫りになりました。特に Chrome は、ネットワーク エラーを示す XMLHttpRequest 例外 101 をスローしていました。

ブラウザの互換性に関するソリューション

ブラウザの互換性の問題に対処するために、Fetch API、 2015 年に JS に導入され、URL からデータをフェッチするためのよりシンプルかつ堅牢なアプローチを提供します。コードの更新バージョンは次のとおりです。

fetch("myText.txt")
  .then((res) => res.text())
  .then((text) => {
    // process the text content
  })
  .catch((e) => console.error(e));

ローカル ファイルへのアクセス

最新のブラウザでは、ファイル システムへの直接アクセスが厳しく制限されているため、file:/// の使用は避けてください。 。代わりに、 python -m http.server や npx http-server などの軽量 Web サーバーを使用して、標準 HTTP URL 経由でデータをロードできます。 XMLHttpRequest を使用してローカル ファイルにアクセスすると、ステータスが返されません。これを解決するには、ステータス 0 のチェックが必要です。

使用例

更新されたコードを使用するには、file:// を使用してファイル パスを指定します。 /:

function readTextFile(file) {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", file, false);
  rawFile.onreadystatechange = function () {
    if (rawFile.readyState === 4) {
      if (rawFile.status === 200 || rawFile.status == 0) {
        // process the text content
      }
    }
  };
  rawFile.send(null);
}

以上が私の JavaScript コードがローカル テキスト ファイルを読み取れないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。