最近在写一套前端页面，发现每个页面都复制一遍公共头、尾，十分不方便。于是就想能否也像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的更多相关文章

  1. 使用Varnish+ESI实现静态页面的局部缓存（思路篇）

    使用Varnish+ESI实现静态页面的局部缓存(思路篇) 页面静态化是搭建高性能网站必用的招式之一,页面静态化可以有效提升系统响应速度,同时也有利于搜索引擎优化.但在页面静态化后,静态页面之间包含( ...

  2. 静态页面如何实现 include 引入公用代码

    一直以来,我司的前端都是用 php 的 include 函数来实现引入 header .footer 这些公用代码的,就像下面这样: <!-- index.php --> <!DOC ...

  3. 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点

    使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; s ...

  4. Node.js的静态页面想通过jQuery的Ajax函数调用远程服务的措施无效

    程序下载:https://files.cnblogs.com/files/xiandedanteng/nodejsMakejqueryAjaxInvalid.rar 在 http://www.cnbl ...

  5. Less与TypeScript的简单理解与应用，并使用WebPack打包静态页面

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 创建空项目 使用Less 使用TypeScript 使用WebPack 开始写项目 总 ...

  6. 潭州课堂25班：Ph201805201 django 项目 第五课 静态页面转为模板 (课堂笔记)

    一.分析静态页面   1.静态vs动态 条目 静态页面 动态页面 网站内容 固定不变 经常变动 浏览器加载速度 更快(无需向服务器发起请求) 更慢 改变网站内容 很难(修改或者创建新的html页面) ...

  7. 浅谈php生成静态页面

    一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...

  8. PHP生成静态页面的方法

          在PHP网站开发中为了网站推广和SEO等需要,需要对网站进行全站或局部静态化处理,PHP生成静态HTML页面有多种方法,比如利用PHP模板.缓存 等实现页面静态化,今天就以PHP实例教程形 ...

  9. 根据一个旅游网站的psd素材还原的静态页面

    自学web前端的html.css和jquery两个月,想检验下自己的学习成果,遂从网上下了个关于旅游网站的psd素材,自己照着素材还原网站的静态页面. 这是我制作好的静态页面的压缩文件:旅游网站首页. ...

随机推荐

  1. IDEA安装maven

    1.先到maven的官网下载安装包:http://maven.apache.org/download.cgi 解压安装包 2.配置环境变量 新建变量名MAVEN_HOME 变量值    D:\Soft ...

  2. [转帖]用 OpenSSL 创建可以用于 https 的证书

    用 OpenSSL 创建可以用于 https 的证书 开会时 说到了安全问题 就简单鼓捣了一下 以后还是用nginx 转发比较好一些. https://blog.csdn.net/joyous/art ...

  3. Java中的责任链设计模式，太牛了！

    责任链设计模式的思想很简单,就是按照链的顺序执行一个个处理方法,链上的每一个任务都持有它后面那个任务的对象引用,以方便自己这段执行完成之后,调用其后面的处理逻辑. 下面是一个责任链设计模式的简单的实现 ...

  4. CString VariantToString(VARIANT var);转换

    Variant类型转换成CString代码 对数据库的操作常常会用Variant和_bstr_t类型,在进行MFC等程序中,通常会用到CString类.从variant转换成CString代码如下:v ...

  5. [git] git error: unable to unlink old

    今天git pull ,结果报错 :   git error: unable to unlink old 原因是   文件夹内 一个exe 处于打开状态. 哈哈哈哈,又是个低级错误~~~ 下次注意呀~

  6. java 序列化和反序列化的底层实现原理

    出处:序列化和反序列化的底层实现原理是什么? 一.基本概念1.什么是序列化和反序列化 (1)Java序列化是指把Java对象转换为字节序列的过程,而Java反序列化是指把字节序列恢复为Java对象的过 ...

  7. hdu 1969 pie 卡精度的二分

    Pie Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  8. c# mvc权限系统

    登陆界面可以用index1,现在这个是仿照这个写的 登陆后的界面.模板都是套的,数据那个easyui自己写的 后台直接三层架构,dapper连处理数据后面加了autofac demo地址:https: ...

  9. 转载： Linux查看系统开机时间

    转自: https://www.cnblogs.com/kerrycode/p/3759395.html 查看Linux系统运行了多久时间,此时需要知道上次开机启动时间: 有时候由于断电或供电故障突然 ...

  10. Tomcat项目自动部署脚本

    一般情况下使用的Linux环境都是加固的,root路径只有超级管理员权限才能进入.我们新建一个自己的用户,在/home下会有一个用户目录,传输war包都放在这个目录下,此时不动webapps文件下的内 ...