为什么 Jquery 加载在 Firefox 中不起作用？答案

【问题标题】：why Jquery load is not working in firefox?为什么 Jquery 加载在 Firefox 中不起作用？
【发布时间】：2020-12-10 20:19:20
【问题描述】：

我正在尝试使用 JavaScript(j Query) 将没有正文和 html 标记的导航页面添加到 html 页面。但它不工作。我尝试更改浏览器并使用 firefox、Crome 和 edge。但它没有用。

这是代码结构。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>demo</title>
</head>

<body>

    <div id="content"></div>
    <script>
        $(document).ready(function() {

            $('#content').load("nav.html");

        });
    </script>


</body>

</html>

我也试过这个。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>dem0</title>
<script>
    $(document).ready(function() {

        $('#content').load("nav.html");

    });
</script>
</head>

<body>
<div id="content"></div>
    
</body>

</html>

这是我的 nav.html 文件

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod tenetur beatae ex assumenda, 
non odit praesentium? Animi commodi, est veritatis quis perferendis at blanditiis? Nesciunt 
inventore aperiam odit sint est maiores quo esse facilis accusamus alias</p>

我哪里错了？

【问题讨论】：

控制台报错了吗？您能在开发者的“网络”标签中看到是否发出了 HTTP 请求吗？
您确定nav.html 的路径正确吗？正如 Pointy 所说，您可以在浏览器的开发工具中看到任何问题吗？

标签： javascript html jquery load jquery-load

【解决方案1】：

假设您从本地文件系统打开它并打开 devtools 控制台 - 您将看到这样的错误

Access to XMLHttpRequest at '<yourfolder>/nav.html' from origin
 'null' has been blocked by CORS policy: Cross origin
 requests are only supported for protocol schemes: 
http, data, chrome, chrome-extension, https.

这意味着您遇到了 CORS 问题 - 您可以阅读有关 here 的更多信息

为了使这项工作使用简单的 http 服务器来服务它 - 我建议使用类似 serve - https://www.npmjs.com/package/serve

如果您已经在使用 http 服务器，请发布控制台错误。

祝你好运！

【讨论】：