2012-08-16 29 views
2

我想知道在加載網頁期間是否有任何方式加載其他文件。我正在嘗試將JavaScript模板引擎集成到我的網站中,並希望將我的模板保留在外部文件中,而不必異步加載這些模板,而是在頁面某處指定所需模板並使用它們的內容(這會已經與網頁一起加載)在JavaScript中。
是否有任何方法來實現這樣的功能?我可以在頁面加載期間將文本加載到html

回答

1

加載額外的HTML文件是困難的。如果不是不可能。您將不得不加載返回HTML字符串的JavaScript文件,或者可能使用框架。

但很多模板語言,可以讓你直接在HTML代碼中定義的模板,f.ex把手:

<script id="entry-template" type="text/x-handlebars-template"> 
    template content 
</script> 

您也可以使用節點或其他後端語言從目錄中拉模板和創建一個全局模板包含所有模板字符串的對象。

當我開發使用前端模板時,我在開發時使用單獨的模板文件和Ajax,然後我們有一個node.js腳本,它將所有模板放在全局對象中,而不是放在主HTML請求中,以便更快訪問。

+0

是的,我擔心會發生這種情況(無法同步加載其他文件)。儘管如此,您使用Ajax加載模板包的方法是合理的,因此我將使用您的解決方案。 – Bogdan 2012-08-16 16:37:13

0
.html() 

This met hod在XML文檔中不可用。

在HTML文檔中,.html()可用於獲取任何元素的內容。如果選擇器表達式匹配多個元素,則只有第一個匹配項將返回其HTML內容。考慮下面的代碼:

$('div.demo-container').html(); 

爲了使的以下內容進行檢索,就必須要在文檔中的第一個與類=‘演示容器’:

<div class="demo-container"> 
    <div class="demo-box">Demonstration Box</div> 
</div> 

結果如下所示:

<div class="demo-box">Demonstration Box</div> 

此方法使用瀏覽器的innerHTML屬性。某些瀏覽器可能不會返回原始文檔中完全複製HTML源代碼的HTML。例如,如果Internet Explorer僅包含字母數字字符,則有時會忽略屬性值的引號。

More Help

1

你可能會考慮JSONP這將允許你把它們作爲這聽起來更像是你想要的腳本:沿同步文檔

// HTML 
<script> 
    var files = []; 
    var cache = function(data) { 
     files.push(data); 
    }); 
</script> 
<script src="external.js"></script> 
// External File 
cache("<content>") 
+0

謝謝你的貢獻,馬特。我肯定會研究這種技術,但現在我會採用David的方法,因爲我至少有一種方法可以在加載頁面後立即加載所有內容,儘管不是異步的。 – Bogdan 2012-08-16 16:40:16