无法从 html 中加载 html

Posted

技术标签:

【中文标题】无法从 html 中加载 html【英文标题】：Cannot load html from within html 【发布时间】：2017-01-24 01:30:31 【问题描述】：

我在同一个文件夹中有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、data、chrome、chrome-extension、https、chrome-extension-resource。

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

更新 2：

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

【问题讨论】：

【参考方案1】：

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

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

到：

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

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

我还不得不稍微更改代码：（感谢 Rorymccrossan）：

$(function()  <code> );

【讨论】：

【参考方案2】：

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

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

【讨论】：

那还是不行。我应该不将脚本加载到文档的头部吗？

以上是关于无法从 html 中加载 html的主要内容，如果未能解决你的问题，请参考以下文章