前端页面如何引入公用的页面header和footer

很多时候我们做网站开发的时候会遇到一个比较有趣的问题，那就是我们每个页面使用的footer和header，于是当然我们有办法在每个页面都相同的html标签，显然这样代码的复用程度是很低的，我们需要想到的是能不能仅仅在页面上仅仅引用一个div就可以把整个页面的头都引用过来，当然是可以实现的

那么应该怎样来实现这样的效果，首先我们要引用公共的页面也是模板，我们是不是应该有一个有一个模板:header.templet.html,我们就在模板中写点内容:

<meta charset="utf-8"/>
<div class="inc_header">
<span>当前登录用户</span><span id="inc_loginname"></span>
</div>

我们可以将模板放在项目中一个文件夹里面,在我的项目中我是这样存放的:

上面是我们对文件的存放，在项目中的位置，接下来需要做的事情是在对应的页面对应的js文件中引入header.inc.html文件了

如何引入:

var Include = function(cfg) {this.cfg = cfg;this._init();};Include.prototype = {constructor : Include,_init : function() {var c = this.cfg;if (c.async !== false)c.async = true;this.$container = $('#' + c.id);},fetch : function() {var c = this.cfg, self = this;return $.ajax({url : c.src,type : 'GET',dataType : 'html',async : c.async,success : function(html) {self.$container.html(html);c.onload && c.onload(html);}});}};// 需要引入的代码片段var includes = [ {id : 'header',src : 'resources/views/common/header.inc.html',onload : function() {// console.log('...header loaded...');}}, {id : 'footer',src : 'footer.inc.html',onload : function() {// console.log('...footer loaded...');}} ];$.each(includes, function(i, cfg) {if ($('#' + cfg.id).length) {new Include(cfg).fetch();}});

前端页面如何引入公用的页面header和footer相关推荐

引入html页面比较,前端页面如何引入公用的页面header和footer
很多时候我们做网站开发的时候会遇到一个比较有趣的问题,那就是我们每个页面使用的footer和header,于是当然我们有办法在每个页面都相同的html标签,显然这样代码的复用程度是很低的,我们需要想到 ...
静态页面如何实现 include 引入公用代码
一直以来,我司的前端都是用 php 的 include 函数来实现引入 header .footer 这些公用代码的,就像下面这样:  <!DOC ...
html用标签引入公共页面,html公共部分-header、footer部分引用
html公共部分-header.footer部分引用主要介绍两种方式: 1.通过jq 以请求的方式加载 2.通过的方式加载两种方式各有优缺点,先说第一种. 用jq方式加载: 需要被引用的页面hea ...
js 刷新页面但是不闪烁_前端开发还在手动刷新页面？手把手教你搭建一个自动刷新工具...
作为一名前端,开发web页面是我们的本职工作.在完成一个页面开发的过程中,保存代码然后手动刷新页面查看效果,这样的动作需要重复无数次,虽然一次这样的动作可能只要花费几秒钟的时间,但是次数多了也挺浪费时 ...
web前端页面——移动端简单登录页面、下拉菜单（代码详细注释）
今天跟着专业老师复习了一下前端,感觉好多都已经忘记了,我将今天复习的一些重点整理出来. https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微 ...
python移动端web开发代码_移动web前端开发,前端开发工作总结,移动端页面开发-我主页-一个前端程序猿的博客...
热门推荐 html/css 一.escape和它们不是同一类简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读.编码之后的... 标签: 0 ...
thymeleaf页面中引入公共页面
一.前言当我们在html页面使用thymeleaf时,经常会遇到这样的情况.有一些html片段在我们所有页面都存在,造成了代码重复.遇到这种场景,我们就可以把公共代码段抽取到一个公共页面,在需要使用 ...
iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
html静态页面引入公共html页面
很多人问有什么方法不用模板引擎在普通静态html页面导入公共的html页面,比如header.html, footer.html, 在这里我是这样做的,自己写了一个include.js include ...

前端页面如何引入公用的页面header和footer

前端页面如何引入公用的页面header和footer相关推荐

最新文章

热门文章