在html文件中加載獨立的html文件

Question

我正在開發使用jQuery手機，它有一個多頁面模板如下。 我覺得在相同的HTML內寫入html內容是臃腫的。

因此，我想分開不同的HTML內容，幷包括獨立的HTML頁面。它應該是移動瀏覽器被證明的。這方面的最佳做法是什麼以及如何做到這一點？

注：我不希望服務器端腳本（例如：PHP）來解決這個問題。它應該完全在客戶端完成，沒有任何模板引擎。像angularJS ng-include。

樣的我所期望

<div data-role="page" id="foo1"> 
    <html-include src="foo1.html"></html-include> 
</div> 

移動HTML多頁

<div data-role="page" id="foo1"> 
    <!-- Content 1 here --> 
</div> 

<div data-role="page" id="foo2"> 
    <!-- Content 2 here --> 
</div> 

<div data-role="page" id="foo3"> 
    <!-- Content 3 here --> 
</div> 

Answer 1

<div data-role="page" id="foo1" data-url="foo1.html"> 

</div> 

而且使用JavaScript像這樣：

$('[data-url]').each(function (k,elem){ 
    $(elem).load(elem.data('url')); 
}); 

這會發現，有數據URL作爲屬性的所有元素，並加載在AJAX該頁面，需要接收，並把它對應的HTML html元素。

Answer 2

基本HTML

<div data-role="page" id="foo1"> 
    <!-- Content 1 here --> 
</div> 

JS

$("#foo1").load("foo1.html", function() {}) 

是嗎？