需要帮助使用 jquery 加载 html 页面答案

【问题标题】：Need Help to load a html page using jquery需要帮助使用 jquery 加载 html 页面
【发布时间】：2014-07-08 06:06:58
【问题描述】：

我正在使用 CSS、HTML 和 Jquery 新设计网页。我设计的页面只有标题部分。我想在不同的页面中使用那个标题页。我已经提到了Make header and footer files to be included in multiple html pages，但它仍然不起作用。

我有两个 html 文件。 header.html 工作正常。检查 jsfiddle.net/Binay_Kumar/3xqwh/2/

在我的第二页 header1.html 中，我想链接该 header.html 和第二页的一些其他内容。

编码

header.html

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>Untitled Document</title>
      <link href="../CSS/stylenew.css"type="text/css" rel="stylesheet" /> 
      <div id="header">
       <div id="codeoverheader">
         X SERVICES PVT. LTD.   </div> 
        <div id="codeoverheader1">
          Home|Logout
        </div>
       </div>   
         <div id="header1"></div>
        <div id="header2"></div>
         <div id="backgroundofmenu1"> <!--I have changed as backgroundofmenu1 instead of backgroungofmenu-->
         </div>
         <div id="menu1">
           <a href="secondpage1.html" style="text-decoration:none" id="menucolor" >My HomePage</a></div>
         <div id="menu1line1"> <!--i have changed from 1 to 11-->
        | </div>     
        <div id="menu2">
         <a href="#" style="text-decoration:none" id="menucolor" class="Mydata">My Data</a></div>
       <div id="menu2line2"><!--i have changed from 2 to 21-->
         |</div>           
       <div id="menu3">
        <a href="secondpage2.html" style="text-decoration:none" id="menucolor">Policies And Info</a></div>
        <div id="menu3line3"><!--i have changed from 1 to 31-->
         | </div>  
       <div id="menu4">
        <a href="secondpage3.html" style="text-decoration:none" id="menucolor">Help</a>    </div>
  </head>

它工作正常。

header1.html

 <!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>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Untitled Document</title>
        <link href="../CSS/stylenew.css"type="text/css" rel="stylesheet" />
         <script src="//code.jquery.com/jquery-1.10.2.js"></script>
          <script> 
           $(document).ready(function(){
             $(function(){
               $("#headerpage").load("header.html"); 
             });
         });
       </script>
     </head>
  <body>
     <div id="headerpage"></div>
       <div id="hello">
          hello
      </div>
</body>

这个页面有问题。

stylenew.css

 #header{ 
   position:absolute; 
   top:0;  
   left:0; 
   width:100%; 
   height:header-<length>; 
   height:17%;
   background-color:#004080;
       } 
  #header1{
   position:absolute; 
   top:15%; 
   left:0; 
   width:100%; 
   height:2%;
   background-color:#9ABD2B;  <!-- #CCFF33 first it was there -->
     }
  #hello{
     left:300px;
     top:200px;
     position:absolute;
     font-size:18px;
    }

无论如何，CSS 工作正常，因为它太长了，所以我不分享了。

问题是在运行 header1.html 时它只显示你好，但我期待 header.html 页面内容以及你好。

谁能告诉我犯了什么错误？

【问题讨论】：

jsfiddle.net/Binay_Kumar/3xqwh/2（标头工作）很好，请检查一下。
谁能告诉我为什么我对这个问题投了反对票？好的，没有 pbm。我从过去 2 天开始一直在努力解决这个问题？
你的 JavaScript 错误控制台说什么？
您的开发者工具中的网络选项卡是什么意思？是否正在请求标头？反应是否符合您的预期？
在运行 header1.html 时没有错误只有你好

标签： jquery html css

【解决方案1】：

您对 jQuery 的相对 URI 是错误的，因为您使用的是 file URI。您可以通过使用绝对 URI（以 http 或 https 开头，但随后您会遇到在本地文件上使用 Ajax 的同源策略问题来解决此问题。

在您的开发机器上安装一个网络服务器，以便您在类似网络的环境中进行测试。

【讨论】：

感谢您的合作。
是的，减少了 1 个错误，但仍然存在一个错误 XMLHttpRequest cannot load file:///D:/A%20Product%20Ispl%20New/HTML/header.html。收到无效回复。因此，Origin 'null' 不允许访问。 /D:/A%20Product%20Ispl%20New/HTML/header1.html:1
那么你能告诉我如何处理只有我必须安装的服务器或我必须做的任何设置。
您必须通过它加载文档（通过访问http://localhost/something/something）

【解决方案2】：

我不确定您究竟想在这里做什么，但您似乎想将 header.html 的内容加载到 header1.html 中。如果是这种情况，那么 header.html 应该不包含 and 标记，因为这会导致类似的结果。

此外，您在多个位置（例如 header.html 和 header1.html）没有适当的结束标记。

所以如果你想做这样的事情，做这样的事情：

header.html

<div>
    ...Your header contents here...
</div>

my_page.html

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
           $('#my-header').load('header.html');
        </script>
    </head>
    <body>
        <div id="my-header">
            ... Your header will be inserted here by jQuery
        </div>
    </body>
</html>

所以在这个例子中，header.html 只包含一些 HTML 标记（没有 HTML、HEAD 和 BODY 标记！）并且它包含在 my_page.html 中。我希望这能让你明白。

我想您被否决了，因为您似乎主要只是将一些代码复制粘贴到您自己的项目中，而没有真正了解发生了什么。此外，您应该在此处尽可能干净地发布您的代码。因此，如果某些事情不起作用，只需尝试从中制作一个最小的示例，这样 SO 上的人就不必扫描所有不相关的部分。

【讨论】：

感谢您的合作。但是我没有复制和粘贴代码，我已经提到了，所有我自己设计的东西。
我没有说你有，我只是说看起来像，因为你的帖子有点乱。我只是给出一些提示，说明为什么我认为您的问题可能会遭到反对，仅此而已。

【解决方案3】：

根据错误，问题似乎是 jQuery 没有加载。这可能是因为您在本地工作。更改加载 jQuery 的脚本标记的 src 以包含 http，如下所示：

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

【讨论】：

感谢@jme11 对我的帮助。我已经按照你说的做了。在我收到 2 个错误之前，现在我收到了一个错误。即 XMLHttpRequest 无法加载 file:///D:/A%20Product %20Ispl%20New/HTML/header.html。收到无效回复。因此，不允许访问 Origin 'null'。
再次，这是因为您在本地工作，而不是在服务器上进行测试。 AJAX（您正在调用的加载方法）需要一个服务器。所以要么在外部服务器上测试，要么安装本地服务器进行测试。适用于 Mac 的 MAMP (mamp.info) 是免费的，并且设置起来相当简单，或者如果您使用的是 Windows，您可以尝试 WAMP (wampserver.com)。 YouTube 上有大量关于安装/配置这些的教程。
要加载一个html文件，我必须安装服务器。实际上我第一次这样做只是我问不要感觉不好。
是的，您需要一个服务器来进行 AJAX 调用。 jQuery 方法如：$.ajax()、$.get()、load()、post() 都是 AJAX 的一种形式。
如果您不习惯安装服务器，您可以在您打算托管它的服务器上测试您的文件。但是，这最终会让人厌烦。我建议的这两个选项安装和运行并不难（我什至会说，如果你在 MAC 上，这很容易）。