靜態 HTML 文件怎麼從外部調入 HTML 模板(如頭部,頁尾這些公共的部分)?
你可以先載入整個頁面的框架,用一些佔位標籤來代替你要的不同頁面模塊比如 header 和 footer,再用 JavaScript 發送 AJAX 請求獲取這些靜模板,寫到佔位元素的 innerHTML 里。
我能想到的所有能達到讓頭尾公用的辦法:
1、本地合併,即將HTML硬拆成頭、尾、內容三個部分的文件,在預覽或者發布之前用腳本手工合併。很久以前用過,沒有後台的時候使用效果不錯。
2、自己寫代理(比如用node),請求文件的時候自動加上頭尾文件。
3、王偉康說的iframe。
4、顧軼靈提到的使用ajax動態拉取填充。
5、服務端shtml包含。
6、web伺服器(比如IIS)中設定包含。
7、後台模板引擎處理(字元串拼接)。
8、用圖片、flash等外部資源做(比iframe更蛋疼……)純html做不到,至少要用到js或者後端框架支持。一般都是用MVC框架的template功能來做這樣的事,也就是MVC中的V。你可以參考python的django框架,php的zend框架,ruby的rails框架,java的structs框架,所有的template都是大同小異。
Part I.
可以的,使用框架標籤 & 。Part II.
@TooBug 兄說了,iframe 其實是不推薦使用的標籤。我 Google 了一下「 iframe 不推薦」,比較有價值的一篇文章:為什麼要少用 iframe - 月光博客 為什麼要少用Iframe-月光博客
另外在 CSDN 論壇里看到有人說 iframe 會影響 SEO 。
Part III.剛剛突發奇想,又試了試 HTML5 中的 & 標籤,證實可行。type 屬性我選的是 text/html http://www.ietf.org/rfc/rfc2854.txt 。&
width、height 之類的請大家自行發揮想像吧~
用php寫前端頁面
&
用個前端的mvc 例如 backbone 或 ember 結合js模板引擎都可以做到 不用後端語言
angular js里的&
1.用html(html5)自帶的標籤引入,其他回答者已經回答的很好了2.有後端語言環境的(PHP, JSP, ASP)的,用後端語言引入3.只是單純的做靜態頁面(html, js, css), 那麼你要利用nodejs的模板引擎
- Dust.js
- Embedded JS (ejs)
- Handlebars
- Hogan.js
- Pug (Jade)
- Mustache
- Nunjucks
- Swig (Note: no longer maintained)
以上都是按照字母排序,不按使用量排序,其中Pug (由Jade改名而來)是目前使用量最多的模板引擎
推薦個如何使用模板引擎的文章(博主是用Nunjucks來介紹的)How to Modularize HTML Using Template Engines and Gulp樓主伃細了解下shtml吧,應該對你有用.
請使用伺服器端包含,既我們說的SSI,文檔後綴名是.shtml的就可以使用include包含。
使用node中間件,安裝html-loader即可。
$("head").prepend(require("html!../../meta.html"));
$("body").prepend(require("html!../../header.html")).append(require("html!../../footer.html"));
關於html-loader的使用方法可自行百度。
我用jquery的load方式是可以的,但是純HTML頁面如果需要在DOM ready後與ajax一起執行時,反而是ajax先執行,所以load會比ajax滯後!
現在h5就可以實現了么?
那麼複雜幹嘛,將頭部和尾部寫到公共js里,頁面添加對應的容器,就行。
dw 6s 就有這功能
iframe,或者js載入。如果只管ie,查查.htc模板吧。
推薦閱讀:
※HTML 的入門書籍有哪些推薦?
※實現單行文字兩端對齊時,使用 當作空格和使用 white-space: pre 的原生空格有什麼區別?哪個更好一些?
※CSS 中 block-level boxes、containing block、block formatting context 三者之間的區別和聯繫是怎樣的?
※rem這個新網頁設計單位具體是怎樣的?
※為什麼Markdown在2004年才出現,而推廣更晚?
TAG:Web開發 | 前端開發 | HTML | JavaScript |