江苏龙网

  1. 首页 > 生活 > >

静态html怎样包括header和footer ?

复用的页面布局, 考虑加载速度相关的性能和效果, 不要用 jQuery. 尽量服务端做组件化, 其实就是一个 HTML 字符串模板的函数. 比如楼上有人说 EJS 就可以.
■网友
通常，这是在server端做的事情，可以使用各种各样的文件include技术，如：Server Side Includes但我看题主的意思好像是要在浏览器端来实现，可浏览器端没有类似的技术，只能另辟蹊径。那么，最容易想到的办法就是：document.write()了。可以建立一个文件：header-footer.js内容如下var headerHtml = .join(\u0026#39;\u0026#39;);document.write(headerHtml);var footerHtml = .join(\u0026#39;\u0026#39;);window.writeFooter = function(){ document.write(footerHtml);}
■网友
chrome 还未纳入标准的标签：\u0026lt;link rel="import" href="https://www.zhihu.com/api/v4/questions/41740513/components/head.html"\u0026gt;最大的坏处是不能使用自定义参数来使引入的公共部分因不同页面呈现不同的显示内容（比如当前页面在顶部栏的导航按钮高亮）或者使用jquary自己写一个动态加载。
■网友
使用ejs,include指令插入公共模板
■网友
今天这个问题怎么这么多。。。HTML 静态页面的头部和底部都是相同的，如何让每个页面统一调用一个公共的头部和底部呢？ - 前端开发
■网友
今天正好碰到了这个需求，用纯 js 和 html 实现的，说一下我用的方法。1.把 header 和 footer 剥离成单独的 html 文件。2.在需要引入的页面的头部和尾部分别写一个空 div 标签，作为 header 和 footer 的预留位置。3.新建一个 js 文件，封装一个 ajax 方法，url 分别指向第一步剥离出来的的 html 文件，并将返回的内容用 innerHTML 分别填充进第二步的预留位置中。4.在相应页面引入该 js 文件。这样就完成了。可以很方便地引入想要的模块，以后要维护的话直接改模块对应的 html 文件就好了。希望对题主有帮助~o(∩_∩)o ~
■网友
复用的话，我见到的有两种方式：1. 服务器端渲染：也就是后端的模板引擎，比如说php中的smarty，node中的ejs，这个的原理是在后端解析，拼字符串，最后生成完整的html，再发送到客户端。2, 客户端渲染：这个最常见的就是组件化，比如说angular中的指令，react中的组件，这个时候操作的是dom，动态插入或移除。当然，你说的也可以，但是轮子有些大。


    推荐阅读


    上一篇：电子商务发货流程怎样优化发货单和快递单怎样匹配

    下一篇：怎样评价这样的台式机装机配置单