Question

我正在使用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时它只显示hello 但我期待header.html页面内容以及你好。

谁能说出我做错了什么？

Answer 1

您对jQuery的相对URI是错误的，因为您使用的是file URI。您可以使用绝对URI（以http或https开头）修复，但是在本地文件上使用Ajax会遇到同源策略问题。< / p>

在开发计算机上安装Web服务器，以便在类似Web的环境中进行测试。

Answer 2

我不确定你到底想要做什么，但似乎你想将header.html的内容加载到header1.html中。如果是这种情况，那么header.html应该不包含和标签，因为这会产生类似的结果。

此外，您在多个位置没有合适的结束标记（例如，在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上的人不必扫描所有不相关的部分。

Answer 3

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

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

需要帮助才能使用jquery加载html页面

3 个答案: