將HTML代碼片段加載到DOM中

我試圖想出一個最佳方式來維護包含大量頁面的網站，並且我選擇爲「常見」HTML元素（如頁眉和頁腳）創建單獨的HTML文件。將HTML代碼片段加載到DOM中

目前，我的index.html頁面是這樣設置的，其中jQuery函數應該將text.html的內容注入到頁腳div中。

<html> 
<head> 
<title>Test Site</title> 
<script src="jquery-1.8.3.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#footer").load("text.html"); 
    }); 
</script> 
</head> 
<body> 
    <div id="footer"></div> 
</body> 
</html>

text.html的內容是：

<div style="red"> 
    Hello, world! 
</div>

這似乎並沒有工作，我收到以下錯誤

XMLHttpRequest cannot load file:///Users/Jon/Desktop/text.html. Origin null is not allowed by Access-Control-Allow-Origin

問：這是可能通過jQuery，還是我必須使用PHP /其他？我知道Wordpress做了類似的事情，但我很確定他們使用PHP。如果我能夠實現它，這種方法將非常可持續。

來源

2013-05-15 Jon

有沒有需要像PHP這樣的服務器端語言來做到這一點。控制檯中有任何錯誤嗎？ – 2013-05-15 03:31:39

你得到了什麼錯誤？嘗試'$（「＃footer」）。load（「text.html」，function（response，status，xhr）if（status ==「error」）{ var msg =「對不起，但出現錯誤：「; $（」＃error「）。html（msg + xhr.status +」「+ xhr.statusText）; } –

XMLHttpRequest無法加載file：///Users/Jon/Desktop/text.html。Origin null是Access-Control-Allow-Origin不允許的。 – Jon

你不能通過AJAX請求加載file：//大多數瀏覽器的URL，否則你會得到Origin null is not allowed by Access-Control-Allow-Origin.我相信Firefox會讓你，但Chrome/Safari不會。（有關更多信息，請參閱Google Chrome --allow-file-access-from-files disabled for Chrome Beta 8）

最簡單的方法是運行本地網絡服務器，然後您不會收到該錯誤。

此外，就你在做什麼而言，有比jQuery更好的庫。我正在使用https://github.com/linkedin/dustjs/wiki/Reusable-UI-Dust-modules - 與How to define mustache partials in HTML?類似 - 都有部分/包含其他文件。你也可以看看http://pagerjs.com/

另一個值得檢查的項目是http://docpad.org/ - 它也會爲你安裝一個web服務器。一旦您完成了網站的工作，您可以從所有部分生成靜態HTML。

來源

2013-05-15 03:36:00