无法从 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】：当您在文档的<head> 中加载脚本时，您需要将 jQuery 代码放在 document.ready 事件处理程序中。目前，您的代码在 DOM 中存在 #navBar 元素之前正在执行。试试这个：
<script src="js/jquery-3.1.0.min.js"></script>
<script>
$(function()
$("#navBar").load("navbar.html");
);
</script>
【讨论】：
那还是不行。我应该不将脚本加载到文档的头部吗？以上是关于无法从 html 中加载 html的主要内容，如果未能解决你的问题，请参考以下文章
我无法从 JQuery ajax 调用中加载部分 Django 模板