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素材,自己照着素材还原网站的静态页面. 这是我制作好的静态页面的压缩文件:旅游网站首页. ...
随机推荐
- 修改umask后apache报错：because search permissions are missing on a component of the path,
0.修改umask后apache报错:because search permissions are missing on a component of the path, 1.ls -lrth ./h ...
- windows下安装Sonar
1.sonar安装: sonar有三部分组成: 1.服务端:显示分析结果和sonar相关配置 2.客户端:对项目运行源代码进行运算和分析 3.数据库:存储sonar配置和代码分析结果的数据库 2.so ...
- Redis二进制反转算法分析
在 redis 源码中 dictScan 算法中用到了用到了非常经典的二进制反转算法,该算法对二进制的反转高效而实用,同时对于理解位运算也有非常大的帮助.先呈现源码: /* Function to r ...
- 洛谷P3353 【在你窗外闪耀的星星】
题目真的好甜呢QwQ 冲着这题面也要来做 满分解法:线段树 我们暴力地把所有点建成一颗线段数 接着在从1到maxx里每个长度为 w的区间中执行区间求和 其实单点修改都不需要,可以在输入的时候统计出每个 ...
- 基于C#开发的扩展按钮控件
最近在准备一套自定义控件开发的课程,下面将第一个做的按钮控件分享给大家. 其实这个控件属于自定义控件中的扩展控件,与组合控件和GDI+开发的控件不同,这个控件是继承原生的Button, 这个控件的目的 ...
- SQLite数据库_c/s架构的心得
1.使用是Navicat Premium软件, Microsoft Windows版本. 2.选择SQLite并新建数据库: 3.将建好的SQLite数据库,放到新建的项目的debug文件下中, 并在 ...
- 1、传统身份验证和JWT的身份验证
1.传统身份验证和JWT的身份验证 传统身份验证: HTTP 是一种没有状态的协议,也就是它并不知道是谁是访问应用.这里我们把用户看成是客户端,客户端使用用户名还有密码通过了身份验证,不过 ...
- Java Jersey的详情概述
Jersey是一个RESTFUL请求服务JAVA框架,与常规的JAVA编程使用的struts框架类似,它主要用于处理业务逻辑层. 与springmvc 的区别: 1. jersey同样提供DI,是由g ...
- go之环境安装
1)Linux安装 https://studygolang.com/dl # 在 ~ 下创建 go 文件夹,并进入 go 文件夹 mkdir ~/go && cd ~/go 下载的 g ...
- 6 java 笔记
1 java的类通过构造器来创建该类的对象 2 java提供extends关键字来实现子类继承父类 3 初始化块总是在构造器调用之前被执行 4 可以吧java中的类当成一种自定义的类型 5 类定义的变 ...