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素材,自己照着素材还原网站的静态页面. 这是我制作好的静态页面的压缩文件:旅游网站首页. ...
随机推荐
- java面试指导2019-9-10
11. Java 面向对象编程三大特性: 封装 继承 多态 封装 封装把一个对象的属性私有化,同时提供一些可以被外界访问的属性的方法,如果属性不想被外界访问,我们大可不必提供方法给外界访问.但是如果一 ...
- JS字符串格式化~欢迎来搂~~
/* 函数:格式化字符串 参数:str:字符串模板: data:数据 调用方式:formatString("api/values/{id}/{name}",{id:101,name ...
- vsphere6.7-虚拟机与ESXI时间同步
环境介绍 esxi 6.7+vsphere6.7 需求配置 设置虚拟机时间与esxi时间同步.esxi时间与NTP服务器同步 配置方式 在esxi上开启NTP服务器时间同步,如下图: 修改虚拟服务器的 ...
- Oracle的基本操作-修改表结构、数据的增删改查
创建一个person表 create table person( pid ), pname ) ); 添加一列 ); 修改列类型 ); 修改列名称 alter table person rename ...
- Spring4学习回顾之路05—自动装配,Bean的继承,依赖和作用域
自动装配 xml配置里的Bean的自动装配,Spring IOC容器可以自动装配Bean,仅仅需要做的是在<bean>标签里的autowire属性里指定自动装配的模式. ①byType(根 ...
- one:arguments对象伪数组
这是我的第一个博客 <script> //计算N个数字的和 //定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传入了几个参数,没办法计算, // 但是如果在函数中知道了参数的 ...
- 安装laravel框架
方式一:Windows版本通过composer来下载安装laravel框架 一:laravel是php的一个web框架.laravel框架安装主要依赖composer工具,本经验就介绍一下怎么在win ...
- C++ 包含目录、库目录、附加包含目录、附加库目录、附加依赖项之详解(转)
最近因为接触机器学习,所有涉猎到C++方面的开发.在c++中有几个概念很迷糊. VS项目中的包含目录.库目录.附加包含目录.附加库目录.附加依赖项均在"项目->属性->配置属性& ...
- django初步了解4
django单表查询 必知必会13条 1.all() 查询所有 QuerySet res=models.Book.objects.all()#惰性查询 print(res) for i in res: ...
- java:线上问题排查常用手段(转)
出处:java:线上问题排查常用手段 一.jmap找出占用内存较大的实例 先给个示例代码: import java.util.ArrayList; import java.util.List; imp ...