jQuery.load加載HTML文件

我已經從來沒有在此之前使用jQuery，但我會解釋我正在嘗試做什麼。jQuery.load加載HTML文件

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>My Awesome Website</title> 
     <link href="style.css" rel="stylesheet" type="text/css"/> 
     <link rel="shortcut icon" href="/favicon.ico" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    </head> 
    <body> 

<!-- <iframe width="100%" height="175" frameborder="0" scrolling="no" src="navbar.html"></iframe> I used to use this - but i cant have dropdown menus. --> 
      <!-- This is my problem --> 
     <script> 
       $('#navbar').load('./navbar.html'); 
     </script> 
     <noscript> 
      <h1>Please enable Javascript!</h1> 
     </noscript> 

     <div id="container"> 
       <!-- Content Here --> 
     </div> 

    </body> 
</html>

navbar.html

<div id="navbar"> 
     <li><object width="64" height="64" data="favicon.svg" type="image/svg+xml"></object></li> 
     <li><object width="64" height="64" data="icons/tech.svg" type="image/svg+xml"></object></li> 
     <li><object width="64" height="64" data="icons/games.svg" type="image/svg+xml"></object></li> 
     <li><object width="64" height="64" data="icons/contact.svg" type="image/svg+xml"></object></li> 
</div>

所以我想在這裏做的，是有很多的HTML頁面，所有鏈接一個navbar html頁面，所以當我更改navbar.html時，我不必更改每個頁面。

我已經有了另一個問題here。 Davor Milnaric建議「如果您使用的是jQuery，您可以使用'.load（）'函數。api.jquery.com/load」來嘗試，但我無法使它工作。我究竟做錯了什麼？我如何解決它？任何幫助將非常感激。

來源

2013-05-26 Yharooer

你需要做兩件事情：

使用$（文件）。就緒（） - 讀here;所有jQuery代碼必須包裝這樣的：
```
$(document).ready(function(){ 

    //jquery code goes here....   

}); 
```
變化

$('#navbar').load('./navbar.html');

到

$('#container').load('./navbar.html');

..你沒有與ID元素= 「navbar」並根據this：

如果沒有元件被選擇匹配的 - 在這種情況下，如果文檔不包含具有ID =「結果」的元件（在我們的情況下，「導航欄」） - Ajax請求將不發送。

來源

2013-05-26 02:00:19

您也可能需要等待DOM加載。

<script> 
     $(document).ready(function() { 
      $('#result').load('navbar.html #navbar', function() { 
       alert("loaded"); 
      }); 
     }); 
    </script> 

    <div id="result"> 
    </div>

來源

2013-05-26 01:40:57 eklhad

嗨，謝謝你的回覆。 :)當我嘗試這個，沒有改變，導航欄仍然不加載...任何想法？ – Yharooer

jQuery.load加載HTML文件

回答

相關問題