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

时间：2017-08-20 08:35:51

标签： javascript jquery html css wamp

我正在尝试做什么

使用本地服务器将HTML文件加载到页面上的内容块中，其中.load函数位于链接的.js文件中。

我正在使用

HTML
CSS
使用Javascript / jQuery的
WAMP
铬
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>

design.js 

$(document).ready(function() {

    loadNav();

});

function loadNav(){

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

}

OR

design.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>

OR

的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>

2 个答案:

答案 0 :(得分：1)

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

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

关于浏览器政治。它适用于Firefox，但不适用于Chrome。 如果您希望它工作，您可以在本地计算机上运行Web服务器来提供文件。

更多信息：

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

答案 1 :(得分：0)

OP回答自己的问题。我有一个低于我在上面发布的JavaScript中的另一个函数，它缺少一个结束括号，这导致整个.js文件无效。愚蠢的错误！一切正常，为了记录，我没有必要包括完整的路径。

相关问题
最新问题