load()メソッドは、何故サーバ上でしか使えない

質問

jQueryのload()メソッドは、
何故、サーバ上でしか使えないのでしょうか？

もし、ローカル環境で使おうとした場合に
不都合なことでもあるのでしょうか？

回答No.4

t_ohta

FileReaderクラスを使って外部ファイルを変数に読み込んで、その変数の中からjQueryを使ってタグ指定で抜き出すのはダメなのでしょうか。
検証していないのでデバッグが必要かと思いますが、以下のような感じでファイルを変数に読み込んでおいて、その変数に対してjQueryのfindメソッドで抽出すれば同じような結果になると思います。

const reader = new FileReader();
reader.onload = () => {
　const readData = reader.result.find('P').text();
};
reader.readAsText("sample.html");

お礼

ご回答ありがとうございます。

補足

ローカル環境で使おうというのが
本題なので、無理ですね。

回答No.3

t_ohta

＞　ローカル環境で
＞　同じフォルダー内の他のHTMLファイルを
＞　読み込むためのメソッドは無いのでしょうか？

使えるとしたら「FileReaderクラス」ですかね。
jQueryではなくJavaScript(HTML5)の機能ですけど。

先の回答にも書いた通り、悪意を持ったプログラムが埋め込まれたサイトにアクセスして、勝手にローカルファイルを盗み出されたりという問題が起きないよう、セキュリティの観点からローカルファイルへのアクセスは制限が多くなっています。

補足

・HTMLファイルを読み込む
これだけでしたら、Objectタグ、iframeタグを生成して
ターゲット要素にappendすれば、jQueryのloadメソッドと同等の機能が実現できます。

・タグを指定して一部だけ抽出する
読み込んだHTMLファイルのp要素だけを抽出する
jQuery だと、
$("#target").load("sample.html p");
で実現できます。
さて Vanilla JSでは無理でしょうか？

（※ new FileReaderは手作業を要するので論外）

回答No.2

t_ohta

＞　相対パスでも可能だと思いますが？

パスの指定は相対パスでも問題ありませんが、プロトコルはHTTP（HTTPS）が使われます。
パスとプロトコルは別モノですので分けて考えましょう。
http:// と file:// はプロトコル（通信方法）の違いなのでどうにもなりません。

URLを指定するとき、プロトコルを省略した場合はそのソフトが補完してくれているだけで、load()関数はHTTPにしか対応していないので http:// と補完して通信します。
file:// には対応していない関数なのです。

また、JavaScript全般の仕様としてセキュリティの観点からローカルファイルへのアクセスは厳しく制限されています。
そのためプログラム上から自動的にローカルファイルにアクセスするような動作は制限を受けます。

補足

＞load()関数はHTTPにしか対応していない
その点は納得しました。

ローカル環境で
同じフォルダー内の他のHTMLファイルを
読み込むためのメソッドは無いのでしょうか？

例えば、タグを指定して一部だけ抽出する
jQuery なら、
$("#div2").load("sample.html p");

当方は、とりたてて
loadメソッドを使いたいということではなく、
div2要素に読み込んだ「sample.html」内の
P要素のプロパティを取得したいのです。
可能なら教えてください。

回答No.1

t_ohta

load() は指定したURLからファイルを読み込む関数です。
URLで指定した先へはHTTP（HTTPS）で接続するのでローカル環境の file:// でのアクセスには対応していません。

ローカル環境でテストしたい場合は、パソコンにWebサーバソフトを入れてテストしましょう。

お礼

ご回答ありがとうございます。

補足

相対パスでも可能だと思いますが？