jquery实现静态页面include
最近在写一套前端页面，发现每个页面都复制一遍公共头、尾，十分不方便。于是就想能否也像PHP模板引擎一样，使用include引入公共文件，这便是接下来这段代码的意义。
我们先来总结一下需求：
1.可以像使用函数一样来使用include.
2.可以在页面中任何地方使用，在哪调用就文件插入到页面中哪个位置。
3.可以加载任意的静态文件，也就是说我们希望可以将要加载的文件名称传给这个函数接下来，我们来说下每条需求对应的解决思路：
1.如何像函数一样来使用呢？
1> 写个公共函数，每个页面都加上。
2> 对于jquery来说，我们可以写成个插件。
在这里呢，我们选择了第2种，原因你懂的……
2.对于插入位置，这个应该是最不好办的了，你可能用说有啥不好办的，弄个div，放里边呗！
但是，为了用这个函数我们需要写个script标签，如果再用个div占位会非常乱。
于是我们想，如果能用script定位就好了。能吗？答案当然是肯定的。
3.至于加载任意文件，传个参数就好了。
最后，我们把写好的插件代码放上，使用前一定要先引入jquery.
JS -- jquery.include.js
jQuery.fn.extend({
include: function (path) {
var _this = $(this);
$.get(path, function (html) {
_this.replaceWith(html);
});
return 0;
}
});HTML -- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.incloud.js"></script>
</head>
<body>
<script type="text/javascript" id="Header">
$("#Header").include("inc_header.html");
</script>
</body>
</html>jquery实现静态页面include的更多相关文章
- 使用Varnish+ESI实现静态页面的局部缓存（思路篇）
使用Varnish+ESI实现静态页面的局部缓存(思路篇) 页面静态化是搭建高性能网站必用的招式之一,页面静态化可以有效提升系统响应速度,同时也有利于搜索引擎优化.但在页面静态化后,静态页面之间包含( ...
- 静态页面如何实现 include 引入公用代码
一直以来,我司的前端都是用 php 的 include 函数来实现引入 header .footer 这些公用代码的,就像下面这样: <!-- index.php --> <!DOC ...
- 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点
使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; s ...
- Node.js的静态页面想通过jQuery的Ajax函数调用远程服务的措施无效
程序下载:https://files.cnblogs.com/files/xiandedanteng/nodejsMakejqueryAjaxInvalid.rar 在 http://www.cnbl ...
- Less与TypeScript的简单理解与应用，并使用WebPack打包静态页面
既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 创建空项目 使用Less 使用TypeScript 使用WebPack 开始写项目 总 ...
- 潭州课堂25班：Ph201805201 django 项目 第五课 静态页面转为模板 (课堂笔记)
一.分析静态页面 1.静态vs动态 条目 静态页面 动态页面 网站内容 固定不变 经常变动 浏览器加载速度 更快(无需向服务器发起请求) 更慢 改变网站内容 很难(修改或者创建新的html页面) ...
- 浅谈php生成静态页面
一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...
- PHP生成静态页面的方法
在PHP网站开发中为了网站推广和SEO等需要,需要对网站进行全站或局部静态化处理,PHP生成静态HTML页面有多种方法,比如利用PHP模板.缓存 等实现页面静态化,今天就以PHP实例教程形 ...
- 根据一个旅游网站的psd素材还原的静态页面
自学web前端的html.css和jquery两个月,想检验下自己的学习成果,遂从网上下了个关于旅游网站的psd素材,自己照着素材还原网站的静态页面. 这是我制作好的静态页面的压缩文件:旅游网站首页. ...
随机推荐
- windows下,给golang编译的exe添加一个图标
通过go build生成的exe文件,通常是一个默认的图标,发给别人的时候,总觉得像病毒,下面我们来给他加一个好看的图标,让他看起来正经一些. 1.找到一个喜欢的图片. 2.通过工具或是在线工具生成. ...
- CWMP开源代码研究——git代码工程
原创作品,转载请注明出处,严禁非法转载.如有错误,请留言! email:40879506@qq.com 声明:本系列涉及的开源程序代码学习和研究,严禁用于商业目的. 如有任何问题,欢迎和我交流.(企鹅 ...
- opendir 、readdir 小结
转载于:http://blog.csdn.net/lin_fs/article/details/7335573 1. opendir() 头文件 #include<sys/types.h> ...
- Find Duplicate File in System
Given a list of directory info including directory path, and all the files with contents in this dir ...
- 批量导出docker images 的一个简单方法
docker images |cut -c - |xargs docker save -o iamges.tar 主要 最大的长度不能超过 18 超过了就得改一下 -c 后面的数据长度 最终效果为: ...
- C#常见面试题（一）——try-catch-finally-return
面试常会被问及try-catch-finally,现在做一下总结: 第一.不管有没有出现异常,finally块中代码都会执行. 第二.finally 代码块中不能有return. 第三.如果try 或 ...
- lua加载DLL
.cpp //若没有在项目属性--库文件.依赖文件.包含添加.则添加一下路径 #pragma comment (lib,"lua5.1.lib") #include " ...
- 阿里云语音合成（汉语英语）带UI界面的小程序（python）
一,项目说明 将汉文转汉语.英文转英语,同时又有逗号<###English###>,<,,,>和句号<...>标志符用于文件处理.其中英文包含在### 英文 ### ...
- python读写增删修改ini配置文件
一,百度百科 .ini 文件是Initialization File的缩写,即初始化文件,是windows的系统配置文件所采用的存储格式,统管windows的各项配置,一般用户就用windows提供的 ...
- C# 添加log4net日志
一.添加log4net的Nuget包 二.在Web.config或者App.config文件中添加log4net配置 代码: <log4net> <!-- OFF, FATAL, E ...