jqueryを使ったインクルード方法

実現したいこと

かなりの初心者なので初歩的な質問ですが、教えて下さい。
jqueryを使ったインクルード方法を実装したいです。
すごく初心者的な理由な気がするのですが、わかる方教えて下さいm(__)m

発生している問題・分からないこと

サイトで調べたコードをそのまま持ってきて実装しても、ローカルでjqueryが動きません。

該当のソースコード

index.html
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
5<script>
6  $(function() {
7       $("#header").load("header.html");
8       $("#footer").load("footer.html");
9});
10</script>
11</head>
12<body>
13
14<div id="header"></div>
15
16<main>
17
18</main>
19
20<div id="footer"></div>
21</body>
22</html>

header.html
1<header id="header">
2タイトルロゴや画像<br>
3グローバルメニューなど
4</header>

footer.html
1<footer id="footer">
2サイトのSNS情報や<br>
3コピーライトなど
4</footer>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

いろいろなサイトのコードも試しましたが動きません。

補足

特になし

行動規範の内容に同意します

回答3件

ローカルでjqueryが動きません。

残念ながら、ローカルファイルではセキュリティ上、JavaScriptから別ファイルを読み込むことができなくなっています（MDN）。

投稿2025/02/03 08:13

maisumakun

総合スコア146329

tt_360

2025/02/03 23:55

ありがとうございます！ローカルでは作動できないのですね！初歩的な質問に丁寧にありがとうございました。

行動規範の内容に同意します

まずjQueryの読み込みで
src="//code.jquery.com/jquery-2.2.4.min.js"
とプロトコル（https:）を省略しているのですが、
これだとローカルで開いた時
file:///｛パス｝/index.html
となるので
file:///code.jquery.com/jquery-2.2.4.min.js
を読み込もうとします。
なのでhttps:を省略しないで記述して下さい。

jQueryが読み込めてもload()でCORSエラーになると思います。
これの対処法は下記ページが参考になると思います。
https://qiita.com/t_katsumura/items/3f2a401ff6e2076acb26
私はFirefoxで主に開発しているので他のブラウザがこの方法で対処できるか確認していません。
Firefoxの場合ですが「content.cors.disable」の変更は必要なさそうです。

投稿2025/02/03 17:23

編集2025/02/03 17:49