需要帮助以使用jQuery加载HTML页面
[英]Need Help to load a html page using jquery
问题描述
我正在使用CSS，HTML和Jquery设计网页。 我设计的页面仅包含标题部分。 我想在不同的页面中使用该页眉页。我已经提到了使页眉和页脚文件包含在多个html页中 ，但仍然无法正常工作。
我有两个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页面内容以及问候。
谁能告诉我我犯了什么错误？
3 个解决方案
解决方案1
1 2014-07-08 06:43:03
您对jQuery的相对URI错误，因为您正在使用file URI。 您可以通过使用绝对URI（以http或https开头的绝对URI）来解决此问题 ，但是随后会遇到在本地文件上使用Ajax的Same Origin Policy问题。
在开发计算机上安装Web服务器，以便在类似Web的环境中进行测试。
解决方案2
0 2014-07-08 06:43:57
我不确定您到底要在这里做什么，但是似乎您想将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的人们就不必浏览所有不相关的部分。
解决方案3
-1 已采纳 2014-07-08 06:53:23
根据该错误，问题似乎在于jQuery未加载。 可能是因为您在本地工作。 更改用于加载jQuery的脚本标签的src，使其包含http，如下所示：
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
需要有关jQuery load（）的帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.