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

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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

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

1263

最近项目要做一个移动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>

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