html内からhtmlを読み込めません

index.htmlとnavbar.htmlは同じフォルダ内にあります。html内からhtmlを読み込めません

<script src="js/jquery-3.1.0.min.js"></script> 
<script> 
    $("#navBar").load("navbar.html"); 
</script>

次divがbody

<div id="navBar"></div>

内にあるnavbarは、このテストコードが含まれています：

<p> Test File </p>

githubのリポジトリはここにある：https://github.com/roymunsonstudios/roymunsonstudios.github.ioindex.htmlファイルには、次のコードを持っています

この単純なHTMLのインポートが機能しないのはなぜですか？

UPDATE：

jqueryの-1.11.3.min.js：

コンソールにエラーがあります///ユーザ/ vroy /開発/ウェブサイト：5 XMLHttpRequestがファイルをロードすることはできません/roymunsonstudios.github.io/navbar.html。 Cross originリクエストは、http、data、chrome、chrome-extension、https、chrome-extension-resourceのプロトコルスキームでのみサポートされています。

index.htmlファイルは、2つのバージョンのJQueryを参照しています。スクリプト内のもの。また、フッターにあるJQueryの別のバージョン。しかし、何らかの理由で、JQueryの新しいバージョンを使用したいとしても、スクリプトは古いバージョンのJQueryで実行されています。私はこれを変更する必要がありますか？

UPDATE 2：

エラーがまだのjQueryの最新バージョンで発生します。

出典

2016-09-15 Roymunson

エラーの解決方法が変更された：

$("#navBar").load("navbar.html");

をする：

$("#navBar").load("https://-to-navbar.html");

.LOAD機能のみが保存されているURLがないファイルで動作するようですので、ローカルに。

また、私は少しのコードを変更する必要がありました：（Rorymccrossanにクレジット）：まだ動作しません

$(function() { <code> });

出典

2016-09-15 22:45:37 Roymunson

ドキュメントの<head>にスクリプトをロードするときに、jQueryコードをdocument.readyイベントハンドラに配置する必要があります。現時点では、DOMに#navBar要素が存在する前にコードが実行されています。これを試してみてください：

<script src="js/jquery-3.1.0.min.js"></script> 
<script> 
    $(function() { 
     $("#navBar").load("navbar.html"); 
    }); 
</script>

出典

2016-09-15 22:03:27

を。ドキュメントの先頭にスクリプトをロードしないでください。 – Roymunson

コンソールのエラーを確認しましたか？ –

ああ、エラーが見つかりました。 – Roymunson

html内からhtmlを読み込めません

答えて

関連する問題