gpt4 book ai didi

javascript - 无法将js文件链接到html加载本地文件

转载 作者:太空宇宙 更新时间:2023-11-04 08:17:51 24 4
gpt4 key购买 nike

我想做什么

使用本地服务器在链接的 .js 文件中使用 .load 函数将 HTML 文件加载到页面的内容 block 中。

我在用什么

HTML
CSS
Javascript/jQuery
WAMP
Chrome
Windows 10

问题

我可以在页面内成功执行此操作,但在使用链接文件时无法使其正常工作(事实上,当我使用链接文件时,我无法让 任何 JavaScript 工作文件),我宁愿能够维护一个单独的 .js 文件。

我做了什么

  • 检查拼写
  • 检查文件路径
  • 阅读类似的 SO 问题和评论(没有帮助)
  • 重新启动我的电脑(为什么不呢?)
  • 在使用 WAMP 之前,尝试在允许访问本地文件的情况下启动 Chrome。这工作了几分钟……直到它不再起作用。

注意事项

  • 我对 JavaScript 和 jQuery 还很陌生。
  • 链接的 .css 文件从未给我带来任何麻烦。
  • 是的,nav.html 与 index.html 在同一目录中。
  • 是的,js 文件夹与 index.html 在同一目录中,而 design.js 确实在该文件夹中。
  • WAMP 图标为绿色,我能够成功设置 VirtualHost。

对我不起作用的代码

index.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="js/design.js"></script>
</head>
<body>
<header>
</header>
<nav>
</nav>
<article>
<section>
</section>
</article>
<footer>
</footer>
</body>
</html>

设计.js

$(document).ready(function() {

loadNav();

});

function loadNav(){

$('nav').load('nav.html');

}

设计.js

$(document).ready(function() {

$('nav').load('nav.html');

});

适合我的代码

index.html

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

$('nav').load('nav.html');

});
</script>
</head>
<body>
<header>
</header>
<nav>
</nav>
<article>
<section>
</section>
</article>
<footer>
</footer>
</body>
</html>

index.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
<header>
</header>
<nav>
</nav>
<article>
<section>
</section>
</article>
<footer>
</footer>
<script>
$('nav').load('nav.html');
</script>
</body>
</html>

最佳答案

如果你打开控制台你会看到

XMLHttpRequest cannot load file:///.../nav.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

这是关于浏览器政治的。它适用于 Firefox,但不适用于 Chrome。如果你想让它工作,你可以在你的本地机器上运行一个网络服务器来提供文件。

更多信息:

XMLHttpRequest cannot load file. Cross origin requests are only supported for HTTP

"Cross origin requests are only supported for HTTP." error when loading a local file

关于javascript - 无法将js文件链接到html加载本地文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45780121/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com