Question

在阅读了Stack Overflow上的其他几篇文章之后，我决定使用jQuery方法将导航栏添加到代码在index.html中的header.html中。但是，导航栏未显示在index.html上，控制台显示“访问XMLHttpRequest错误”。有人可以告诉我为什么会出现此错误吗？

这是我的index.html HTML：

<!DOCTYPE html>
<html>

<head> 


    <link href="header+footer.css" rel = "stylesheet" type="text/css" />
    <link href="index.css" rel = "stylesheet" type="text/css" />

     <meta charset="utf-8">
    <title> The Novel Column - Book Reviews </title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 

    <script> 
        $(function(){
        $("#includedContent").load("header.html"); 
        });
    </script> 

 </head> 


<body>


     <div id="includedContent"></div>

这是我的header.html HTML：

<nav>
    <img class="logo" src="images/other/logo.jpg">

    <h1> <a href="index.html"> The Novel Column </a> </h1>

    <ul>

      <li> <a href="about.html"> About </a> </li>
    </ul>



</nav>

在此先感谢您的帮助！

Answer 1

您可以简单地包括jQuery.js并使用

加载HTML文件。

$（“＃DivContent”）。load（“ yourFile.html”）;

例如

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
      $(function(){
       $("#DivContent").load("another_file.html"); 
      });
    </script> 
  </head> 

  <body> 
     <div id="DivContent"></div>
  </body> 
</html>

注意： 在load（）方法中，请确保您在编写外部文件的正确路径。
XMLHttpRequest错误将得到解决在服务器上运行代码时。您可以在本地将XAMPP用于测试目的

有一些这样的第三方方法。

<!DOCTYPE html>
<html>
 <script src="http://www.w3schools.com/lib/w3data.js"></script>

 <body>

  <div w3-include-html="content.html"></div> 

  <script>
    w3IncludeHTML();
  </script>

 </body>
</html>

我希望，“我的答案”能帮助您理解。谢谢

Answer 2

如果您不在本地主机上工作，这是正常的。尝试在Apache或IIS服务器上工作。

在这里您可以了解错误是什么：XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

从单独的HTML文件加载导航栏不起作用

2 个答案: