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素材,自己照着素材还原网站的静态页面. 这是我制作好的静态页面的压缩文件:旅游网站首页. ...
随机推荐
- Linux按顺序启动多个jar的shell脚本
#!/bin/sh export EUREKA=pigx-eureka.jar export CONFIG=pigx-config.jar export GATEWAY=pigx-gateway.ja ...
- IDEA连接 Oracle数据库
package com.zxx.util;import org.apache.commons.dbutils.DbUtils;import java.sql.Connection;import jav ...
- web／服务器知识
一 PV 推到出 QPS 你想建设一个能承受500万PV/每天的网站吗? 500万PV是什么概念?服务器每秒要处理多少个请求才能应对?如果计算呢?? PV是什么:PV是page view的简写.PV是 ...
- Spring 如何解决循环依赖问题？
在关于Spring的面试中,我们经常会被问到一个问题,就是Spring是如何解决循环依赖的问题的. 这个问题算是关于Spring的一个高频面试题,因为如果不刻意研读,相信即使读过源码,面试者也不一定能 ...
- Arrays.asList()方法注意事项
1.Arrays.asList()底层数组作为物理层实现.所以返回的List大小不可更改,即不可以做add().remove()操作,并且对List所做的任何变动都会致使原数组发生变动. public ...
- 通过模板创建一个ABP项目
⒈下载 进入ABP模板页面,选择模板后下载 ⒉运行 1.初始化数据库 修改xxxx.Migrator.xxxx.Web.Host appsettings.json中的连接字符串 2.还原数据库 在Nu ...
- TP5实现自定义抛出异常消息（关闭debug）
重写Handle的render方法,实现自定义异常消息----------------------------------------------------------------------- 首 ...
- Java EE javax.servlet.http中的HttpSession接口
HttpSession接口 public interface HttpSession (https://docs.oracle.com/javaee/7/api/javax/servlet/http/ ...
- CSM(Certified Scrum Master) 敏捷认证是什么？
Scrum 是用于开发和持续支持复杂产品的一个框架.Scrum 基于试验性过程控制理论,借鉴了精益思想.时间盒.模块化设计等,并完整地体现了敏捷宣言和敏捷原则.Scrum 采用一种迭代.增量式的方法来 ...
- 今天朋友带领去谷歌ok2eat 餐厅吃免费午餐
中午去队友公司免费吃饭.朋友带我们去她的楼下吃,就算是googler真的也不是所有cafe都知道,感谢朋友带领.