最近在写一套前端页面，发现每个页面都复制一遍公共头、尾，十分不方便。于是就想能否也像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. elasticsearch 7.1 401 Unauthorized

    1.执行curl -XGET 'localhost:9200/_cat/indices?v&pretty'  报401 2.修改配置xpack.security.enabled: false ...

  2. teach-es6-2(class)

    1 属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. var foo = 'bar'; var baz = {foo}; baz // {foo: &quo ...

  3. redis 慢查询、Pipeline

    1.慢查询 简介 慢查询顾名思义是将redis执行命令较慢的命令记录下来,redis处理慢查询时是将慢查询记录到慢查询队列中 慢查询配置 slowlog-max-len 慢查询队列长度(记录多少条慢查 ...

  4. c语言中int long float double 等类型所占字节及输出表示(转)

    16位编译器 char :1个字节 char*(即指针变量): 2个字节 short int : 2个字节 int: 2个字节 unsigned int : 2个字节 float: 4个字节 doub ...

  5. 今天测试大商创，遇到了 upstream sent too big header while reading response header from upstream

    今天在测试大商创后台系统时,打开店铺结算,查看店铺对应的订单列表时,该列表自动跳转到502,查看线上和测试环境都能正常打开,唯独我的电脑上打开是502, 查询nginx的error.log日志,记录了 ...

  6. linux kprobe rootkit学习

    介绍 <linux二进制分析>中提到了使用kprobe来写内核rootkit,还给出了一个简单的源码实现,这里看一下他的源码 kprobe kprobe的介绍可以看下面这几篇文章 介绍:h ...

  7. cpu 100%怎样定位

    先用top定位最耗cpu的java进程 例如: 12430工具:top或者 htop(高级)方法:top -c 显示进程运行详细列表键入 P (大写P),按照cpu进行排序 然后用top -p 124 ...

  8. spring注解定时器

    上一篇文章写了一个在配置文件中设置时间的定时器,现在来写一个注解方式的定时器: 1.工程结构如下: 2.需要执行的代码块: package com.Task; import org.springfra ...

  9. Anaconda--机器学习环境搭建

    使用Anaconda为机器学习和深度学习设置Python环境 一.安装Anaconda,并更新到最新版本 1.Anaconda 安装: 官方网站下载地址 https://www.anaconda.co ...

  10. web端文件上传，预览，下载，删除

      //HTML部分 <div class="item attachment attachmentNew"> <span class="name&quo ...