Jquery .load() 函数在 Chrome 上不起作用？答案

【问题标题】：Jquery .load() function isn't working on Chrome?Jquery .load() 函数在 Chrome 上不起作用？
【发布时间】：2019-05-03 14:58:49
【问题描述】：

我尝试使用 Jquery 的 .load() 函数。在我看来，它不能在我的 Chrome 上运行，但它在 Firefox 和 Safari 上运行......

我不确定我做错了什么？请帮帮我....

下面是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/goldstyle.css" type="text/css" media="all"/>

</head>
<body>
    <div id="navcontainer">
        <script type="text/javascript">
            $(document).ready(function() {
                $('#navcontainer').load('nav-menu.html');
            });
        </script>
    </div>
</body>

【问题讨论】：

你为什么要包含 jQuery 两次。查看 Chrome 中的开发者控制台，它是否真的发出了对“nav-menu.html”的请求？
^^ 这样，也没有理由将脚本放在有问题的元素中。只需将脚本块放在头部，在脚本包含之后。
另外，如果您直接在浏览器中打开文件，即file:///，那么它在 Chrome 中将不起作用，您会看到类似：Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin.。你需要设置一个网络服务器，比如 WAMP，然后从 localhost 运行它

标签： javascript jquery html google-chrome

【解决方案1】：

我发现如果您直接在浏览器中打开文件，即file:///，它将无法在 Chrome 中运行，您会看到类似以下内容：

Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin

你需要设置一个网络服务器，比如 WAMP，然后从 localhost 运行它

【讨论】：

【解决方案2】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/goldstyle.css" type="text/css" media="all"/>
    <script type="text/javascript">
            $(document).ready(function() {
                $('#navcontainer').load('nav-menu.html');
            });
    </script>
</head>
<body>
    <div id="navcontainer">

    </div>
</body>

我更新了您的代码，以便将负载放在正确的位置，因为将其放在原来的位置是一种不好的做法。

你也不应该有正常的 jQuery，这会导致一些问题！

在 Chrome、IE 和 Firefox 上运行良好。

您是否尝试过为开发者工具推送 F12？

那看看控制台显示什么错误？

【讨论】：

尝试了您的代码并收到此错误。选项文件：//localhost/Users/zBaoAnhLe/Dropbox/My%20Project/NetBean%20Application/Fiverr%20Clients/bmelloh.easynfast.net%20Jquery/public_html/nav-menu.html Access-Control 不允许使用 Origin null-允许来源。 jquery.min.js:6 XMLHttpRequest 无法加载文件：//localhost/Users/zBaoAnhLe/Dropbox/My%20Project/NetBean%20Application/Fiverr%20Clients/bmelloh.easynfast.net%20Jquery/public_html/nav-menu.html。 Access-Control-Allow-Origin 不允许 Origin null。

【解决方案3】：

我遇到了类似的问题，发现 Chrome（与 IE 或 FF 相反）通常需要额外的 Ctrl+F5 来卸载缓存的内容。

对我来说，我的 $().ready 函数似乎不起作用，但在 Ctrl+F5 之后它确实起作用了。

我知道这并不完全是问题的答案，但我带着这种描述的行为来到这里 - 也许其他人也这样做。

【讨论】：

谢谢，这对我有帮助。

【解决方案4】：

我遇到了类似的问题，我通过添加 setTimeout() 而不是只添加 function() 来解决这个问题，它可以工作。

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(setTimeout(function(){ 
$("#list").load("list.htm", function(){$("#list").hide().slideDown(600);})
},300)); 
</script>
<script language="javascript">

我以前的代码不能在 Chrome 浏览器中运行，而是在 Firefox 中运行。

$(document).ready(function(){ 
    $("#list").load("list.htm", function(){$("#list").hide().slideDown(600);})
    });

希望这对你有帮助。

【讨论】：