需要幫助以使用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.