jQueryをローカル環境で動かしたとき、インクルードだけ上手く表示されない

Question

お世話になっております。

現在、HTML、CSSを使ってサイト制作をしております。

①XAMMPでサイトを表示させたときと、
②htmlファイルを右クリックでブラウザに表示したときとで
表示が変わってしまいます。
（クライアントからのレギュレーションで②にする必要があり、
CDNも使用できません）

表示の違いは以下です。
①インクルードしている「nav.html」がきちんと表示される
②インクルードしている「nav.html」がきちんと表示されない
(形が崩れている等ではなく要素自体が抜けている状態です)

②でも①のように冷蔵にインクルードされてる状態にしたいのですがどうすればいいのかわかりません。

他のjquery、例えば「ページ内をスムーズに移動」などは①②とも
正常に動作しているので
jqueryが読み込めていないのではなく、
インクルードの仕方がおかしいのかとも思いますが
検討がつきません。

ちなみに、chromeで表示確認をしております。
（chromeのjavascriptの表示もONにしています）

ご教授いただければ幸いです。

<!-- 省略 -->
<header>
	<div id="nav"></div>
</header>
<!-- 省略 -->





<!-- 省略 -->
</footer>



<!-- jquery -->
<script src="js/jquery-3.6.0.min.js"></script>



<script>
	$(function() {


	    // ページ内をスムーズに移動
		$('a[href^="#"]').click(function(){
		  var time = 500;
		  var href= $(this).attr("href");
		  var target = $(href == "#" ? 'html' : href);
		  var distance = target.offset().top;
		  $("html, body").animate({scrollTop:distance}, time, "swing");
		  return false;
		});


	    // include
		    $.ajaxSetup({cache:false});

		    $("#nav").load("nav.html");
		    $("#footer").load("footer.html");

	});
</script>


</body>
</html>

Comments

[yambejp]

どこの何がわからないのか限定的に質問してください
関係ないソースは全てカットした方がおたがい無駄な作業が減ると思います

[kens_Freelance]

ありがとうございます。修正しました。

[m.ts10806]

>XAMMP
細かいですが、XAMPPです。

Answer 1

残念ながら、file://では、ブラウザによっては1ファイルごとにオリジンが違うとみなされてしまうため、正常に動作しないことがあります。

ブラウザを変えるか、ローカルサーバを使うなどで回避する必要があります。

Comments

[kens_Freelance]

ありがとうございます。そういうことですね、教えていただき感謝いたします。

Answer 2

maisumakunさんの回答のようにfile://で表示している場合、ajaxで外部ファイルを参照できないため、他の手段を取るべきですが、強引な方法で読み込むなら
<script src="xxx"></script>（スクリプトタグ）での読み込みは可能ですので
nav.htmlをnav.jsに変更して、下記のようにhtmlをjsの文字列として変数に代入すれば読み込む事ができます。

//nav.js
let html_nav = `
<div>
  <span>nav</span>
<div>
`;

それをスクリプトタグで読み込み、$().html()を使用すればHTMLを作成することができます。

<script src="js/jquery-3.6.0.min.js"></script>
<script src="nav.js"></script><!-- 追加 -->
<script src="footer.js"></script><!-- 追加 -->


<script>
// include
$("#nav").html(html_nav);
$("#footer").html(html_footer);
</script>

オススメはしませんが

Comments

[kens_Freelance]

ありがとうございます。解決策まで明示いただき感謝いたします。