HTML 文件怎么从外部调入 HTML 模板(如头部,页尾这些公共的部分)?

最近项目要做一个移动web页面项目,很多模版需要公用,由于每个页面都引用相同大量代码不美观而且修改起来非常不方便;不依赖后台有什么办法;


湖上湖
浏览 1390回答 1
1回答

千万里不及你

可以用前端的模板语言也可以自己去写点简单的 举个栗子 重点是思想公共header headerTpl.js<header> &nbsp;&nbsp;&nbsp;&nbsp;{{title}}</header>html<html> &nbsp;&nbsp;&nbsp;&nbsp;<head> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="./headerTpl.js"&nbsp;type="text/template"&nbsp;id="J_headerTpl"></script> &nbsp;&nbsp;&nbsp;&nbsp;</head> &nbsp;&nbsp;&nbsp;&nbsp;<body> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="container&nbsp;J_container"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{{header}}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="zepto.js"></script> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;title&nbsp;=&nbsp;"哈哈";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;headerTpl&nbsp;=&nbsp;$('#headerTpl').html();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;container&nbsp;=&nbsp;$('.J_container').html(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;headerTpl&nbsp;=&nbsp;headerTpl.replace('{{title}}',&nbsp;title); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;container&nbsp;=&nbsp;container.replace('{{{header}}}',&nbsp;headerTpl);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</script> &nbsp;&nbsp;&nbsp;&nbsp;</body></html>感觉有点别扭, 如果是服务端渲染的话 用服务端的模板引擎也是可以把公共部分抽离的.
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript