JQuery没有加载html文件答案

【问题标题】：JQuery not loading html fileJQuery没有加载html文件
【发布时间】：2021-04-24 07:00:46
【问题描述】：

我正在通过在本地计算机上构建示例网站来学习 HTML/JavaScript。我正在尝试重用代码并通过使用 JQuery 来实现；但是，当我使用 load 函数时，它似乎并没有真正做任何事情。

我正在通过 Google Chrome 浏览器进行采样。

我见过使用其他方法的示例，例如使用 php，直接使用 document.write() 的 JavaScript，但我想知道如何将它与 JQuery 一起使用

我已经试过了：

--allow-file-access-from-file with google;因为有些帖子显示了一个已知问题

两个 html 文件也位于同一位置。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  html{

    background:radial-gradient(#505154,#28292b) no-repeat center center fixed;
    background-size:cover; 
  }
  </style>
  <title>WebPage</title>
  <link rel="icon" href="logo.ico"/>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div id="navigation"></div>
    <script> 
      $(function(){
        $("#navigation").load("nav.html"); 
      });
    </script> 
</body>
</html>

nav.html:

<p>This is my include file</p>

我做错了什么吗？还是失踪了？

【问题讨论】：

标签： html jquery

【解决方案1】：

将您的 JavaScript 移动到文件底部，就在 </body> 之前，以便在它运行时定义您的导航。

编辑（为了更清楚）：

当浏览器加载一个文件时，它会从上到下读取并实时运行 JavaScript，因为您尝试访问一个直到页面稍后才定义的元素，正如 jQuery 标准你的 @ 987654322@ 不会做任何事情，因为没有找到选择器。

【讨论】：

澄清一下，javascript 在浏览器“读取”它的那一刻运行。因此，当浏览器从上到下读取您的文件时，它显示为：$("#navigation").load("nav.html");。但它还没有读到<div id="navigation"></div>。所以它还不知道位置。将 JS 放在任何文件的底部是一个很好的做法，以确保在执行任何 JS 之前页面已完全读取（加载）
@KerwinSneijders 好的；我已经更新了；但它似乎仍然不起作用。我还更新了我的问题代码。
确保在添加 jQuery 时关闭脚本标签
是的，解决了这个问题；还是什么都没有。

【解决方案2】：

我在本地测试了你的代码，它运行良好。

您是否有机会在浏览器中使用：file://... 作为 url 运行 HTML 文件？如果是这样，您需要一些东西来托管它，我正在使用 XAMPP。你可以在这里找到更多：

Cross-origin request for local file

PS：如果您使用F12 打开开发工具并转到控制台，很可能会看到错误。比如：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///........

【讨论】：