Question

我在同一文件夹中有index.html和navbar.html。 index.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.io

为什么这个简单的HTML导入不起作用？

更新：

控制台出错：

jquery-1.11.3.min.js：5 XMLHttpRequest无法加载文件：///Users/vroy/Developer/Website/roymunsonstudios.github.io/navbar.html。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。

index.html文件引用了两个版本的JQuery。脚本中的那个。还有另一个版本的JQuery，它位于页脚中。但是，出于某种原因，脚本正在使用旧版本的JQuery运行，即使我希望它使用较新版本的JQuery。我应该改变吗？

更新2：

最新版本的JQuery仍会出现错误。

Answer 1

当您在文档的<head>中加载脚本时，需要将jQuery代码放在document.ready事件处理程序中。目前，在DOM中存在#navBar元素之前执行代码。试试这个：

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

Answer 2

错误的解决方案正在改变：

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

为：

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

因为.load函数似乎只适用于URL而不是本地存储的文件。

我还必须稍微改变一下代码:(感谢Rorymccrossan）：

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

无法从html中加载html

2 个答案: