javascript - HTML 文件怎么从外部调入 HTML 模板（如头部，页尾这些公共的部分）？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - HTML 文件怎么从外部调入 HTML 模板（如头部，页尾这些公共的部分）？

阿神 2017-04-11 13:30:46

[JavaScript讨论组]

1538

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

阿神

闭关修行中......

全部回复(17)

阿神2017-04-11 13:32:46 17楼

可以用前端的模板语言

也可以自己去写点简单的举个栗子重点是思想

公共header headerTpl.js

<header>
    {{title}}
</header>

html

<html>
    <head>
        <script src="./headerTpl.js" type="text/template" id="J_headerTpl"></script>
    </head>
    <body>
        <p class="container J_container">
            {{{header}}}
        </p>
        
        <script src="zepto.js"></script>
        <script>
            var title = "哈哈";
            var headerTpl = $('#headerTpl').html();
            var container = $('.J_container').html();
            
            headerTpl = headerTpl.replace('{{title}}', title);
            
            container = container.replace('{{{header}}}', headerTpl);
        </script>
    </body>
</html>

感觉有点别扭, 如果是服务端渲染的话用服务端的模板引擎也是可以把公共部分抽离的.