我想知道在加載網頁期間是否有任何方式加載其他文件。我正在嘗試將JavaScript模板引擎集成到我的網站中,並希望將我的模板保留在外部文件中,而不必異步加載這些模板,而是在頁面某處指定所需模板並使用它們的內容(這會已經與網頁一起加載)在JavaScript中。
是否有任何方法來實現這樣的功能?我可以在頁面加載期間將文本加載到html
回答
加載額外的HTML文件是困難的。如果不是不可能。您將不得不加載返回HTML字符串的JavaScript文件,或者可能使用框架。
但很多模板語言,可以讓你直接在HTML代碼中定義的模板,f.ex把手:
<script id="entry-template" type="text/x-handlebars-template">
template content
</script>
您也可以使用節點或其他後端語言從目錄中拉模板和創建一個全局模板包含所有模板字符串的對象。
當我開發使用前端模板時,我在開發時使用單獨的模板文件和Ajax,然後我們有一個node.js腳本,它將所有模板放在全局對象中,而不是放在主HTML請求中,以便更快訪問。
是的,你可以用.load使用jQuery的Ajax
負載做一個或兩個線完整的文件http://api.jquery.com/load/
$('#result').load('ajax/test.html');
或.html http://api.jquery.com/html/
OP聲明「不必異步加載這些模板」。 – David 2012-08-16 16:25:31
.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僅包含字母數字字符,則有時會忽略屬性值的引號。
你可能會考慮JSONP
這將允許你把它們作爲這聽起來更像是你想要的腳本:沿同步文檔
// HTML
<script>
var files = [];
var cache = function(data) {
files.push(data);
});
</script>
<script src="external.js"></script>
// External File
cache("<content>")
謝謝你的貢獻,馬特。我肯定會研究這種技術,但現在我會採用David的方法,因爲我至少有一種方法可以在加載頁面後立即加載所有內容,儘管不是異步的。 – Bogdan 2012-08-16 16:40:16
- 1. HTML頁面加載時間
- 2. 在加載頁面時在webview中加載本地html文件
- 3. 我可以在頁面加載之前加載lightbox嗎
- 4. html頁面加載後文本消失
- 5. jquery加載html頁面爲純文本
- 6. 將新內容加載到HTML頁面
- 7. Html引導顯示加載頁面加載文本
- 8. 我想默認文本加載到文本區域,而頁面加載
- 9. 加載頁面後加載html conent?
- 10. 在UIWebView中加載本地html頁面
- 11. 在html頁面中加載php腳本
- 12. 在html加載到頁面後,cookie值是否可以設置?
- 13. 將HTML或jade頁面加載到HTML或jade頁面的div
- 14. 將頁面加載到php
- 15. 將頁面加載到wordpress
- 16. 將腳本加載到頁面上
- 17. Apache將php頁面加載爲文本
- 18. 將包含在HTML頁面中的SVG加載到.aspx頁面
- 19. 將HTML文件加載到面板中
- 20. 我可以得到網頁加載
- 21. 如何將可下載文件添加到我的Github.io頁面?
- 22. popup在頁面加載後加載,無法將datepicker連接到文本框?
- 23. 我可以在頁面加載期間打開Chrome開發工具嗎?
- 24. .js和.css文件在我的JSP頁面中以文本/ html加載。
- 25. mvc頁面可以加載在iframe
- 26. 在html頁面加載期間顯示彈出圖像
- 27. 在html頁面加載和渲染期間顯示跳動
- 28. 頁面加載期間標籤更改
- 29. 頁面啓動期間加載圖像
- 30. 對頁面加載日期時間
是的,我擔心會發生這種情況(無法同步加載其他文件)。儘管如此,您使用Ajax加載模板包的方法是合理的,因此我將使用您的解決方案。 – Bogdan 2012-08-16 16:37:13