静态页面实现include

最新推荐文章于 2021-06-03 14:59:50 发布
最新推荐文章于 2021-06-03 14:59:50 发布
阅读量450 收藏 1
点赞数
分类专栏： include
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lengwenin/article/details/104840028
版权

静态页面实现include

原文地址:http://www.kevinlu98.cn/post/48

需求引入

有时我们在开发纯静态页面或者前后端分离的静态页面时会遇到这样的问题，像导航栏或者网站的footer通常都是一样的，但每个页面都有，所以就有了如下的解决方案

案例

如下页面，我们不希望nav部分和footer出现在每个页面，想将其抽取出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/typo.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<div class="lw-header">
    <nav class="lw-content">
        <ul>
            <li><a href="./index.html">首页</a></li>
            <li><a href="./page1.html">页面1</a></li>
            <li><a href="./page2.html">页面2</a></li>
            <li><a href="./page3.html">页面3</a></li>
        </ul>
    </nav>
</div>
<div class="lw-content lw-body" style="margin-top: 30px;">
    <h1>中文网页重设与排版：<i class="serif">Typo.css</i></h1><br/>

    <h2 id="tagline" class="serif">一致化浏览器排版效果，构建最适合中文阅读的网页排版</h2>

    <ol id="table">
        <li><a href="#section1">关于 <i class="serif">Typo.css</i></a></li>
        <li><a href="#section2">排版实例</a>
            <ul>
                <li><a href="#section2-1">例1：论语学而篇第一</a></li>
                <li><a href="#section2-2">例2：英文排版</a></li>
            </ul>
        </li>
        <li><a href="#section3">附录</a>
            <ul>
                <li><a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a></li>
                <li><a href="#appendix2">开源许可</a></li>
            </ul>
        </li>
    </ol>
</div>

<div class="lw-footer">
    <footer class="lw-content" style="padding-top: 30px;">
        <p>&copy; 2019-2020 <a href="http://www.kevinlu98.cn/">冷文博客-冷文学习者</a></p>
        <p style="margin: 10px 0;">本站资源全部来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。联系邮箱：kevinlu98@qq.com 或
            QQ 1628048198</p>
        <p><a href="http://www.kevinlu98.cn" target="_blank">陕ICP备19024566号</a> &nbsp; </p>
    </footer>
</div>
</body>
</html>

访问一下

https://gitee.com/kevinlu98/imgbed/raw/master/20200313/dbfd6dea-c446-4299-96f4-2d20a0d67295.png

分析

其实想要实现我们的需求也非常简单，我们只需要在页面加载的时候发送ajax请求，去请求公共页面，然后将返回结果放入指定的div里面就可以了

实现

先看下目录结构

https://gitee.com/kevinlu98/imgbed/raw/master/20200313/0e85c875-4a23-437e-a52c-3d9d94b43f81.png

将导航栏抽取出来放入_header.html页面

<!--_header.html-->
<nav class="lw-content">
    <ul>
        <li><a href="./index.html">首页</a></li>
        <li><a href="./page1.html">页面1</a></li>
        <li><a href="./page2.html">页面2</a></li>
        <li><a href="./page3.html">页面3</a></li>
    </ul>
</nav>

此时原来页面的导航栏部分

https://gitee.com/kevinlu98/imgbed/raw/master/20200313/c49b3691-dc47-4051-b944-7751abcf8200.png

抽取footer部分到_footer.html页面

<!--_footer.html-->
<footer class="lw-content" style="padding-top: 30px;">
    <p>&copy; 2019-2020 <a href="http://www.kevinlu98.cn/">冷文博客-冷文学习者</a></p>
    <p style="margin: 10px 0;">本站资源全部来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。联系邮箱：kevinlu98@qq.com 或
        QQ 1628048198</p>
    <p><a href="http://www.kevinlu98.cn" target="_blank">陕ICP备19024566号</a> &nbsp; </p>
</footer>

抽取之后的footer

https://gitee.com/kevinlu98/imgbed/raw/master/20200313/0a65ea3a-7dd0-468d-b7d3-619cd507be28.png

发送ajax的方式有很多，我们这里采用jQuery，并且jQuery为我们提供了load方法，可以直接将ajax返回结果以HTML的方式渲染到页面，我们在页面底部加上如下代码

<script>
    $(function () {
        $("#header").load("./common/_header.html")
        $("#footer").load("./common/_footer.html")
    })
</script>

我们访问试试

https://gitee.com/kevinlu98/imgbed/raw/master/20200313/32b3f8ea-6d38-4bad-a49c-957d30765c3e.png

代码下载

Mr丶冷文
关注
专栏目录
静态页面实现 include 引入公用代码的示例
12-11
一直以来，我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的，就像下面这样： <!-- index.php --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</
静态页面如何实现 include 引入公用代码
weixin_33979203的博客
09-25 558
　　一直以来，我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的，就像下面这样： &lt;!-- index.php --&gt; &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;
在html静态网页中实现include包含功能
csnewdn的专栏
12-26 1万+
在html静态网页中实现include包含功能 对于全站网页制作有用，不用配iis就可以把整站的头部导航和尾部以一个外部文件的方式引入，就好像asp php中的include功能。原理是从网上找的，后用js做了些改进。 js文件代码： var urls = document.getElementsByTagName("script"); var urls = urls[ur
include 一个html页面,页面包含【Include 标签】使用实例（一）
weixin_33198642的博客
06-03 1103
从本文开始，我们就要学习一系列的JEECMS标签使用方法了。以后的教程都会用一个个简洁而典型的实例，配合相关图片来给大家展示JEECMS标签的使用方法。本实例教程使用的版本是JEECMS v2.1 beta版，运行环境是jdk1.6+mysql5+tomcat6，操作系统为windows 2003 server。环境的安装请参考官网的相关说明，这里就不再重复解释了。以后的系列教程都是在这个环境中使...
jquery实现页面嵌套include
汉堡请不要欺负面条
02-11 4467
类似PHP模板引擎一样，使用include引入公共文件一.注意1.使用方式引入js--jquery.include.js(存成插件)jQuery.fn.extend({ include: function (path) { var _this = $(this); $.get(path, function (html) { ...
JSP下动态INCLUDE与静态INCLUDE的区别分析
01-08
 用include伪码实现,定不会检查所含文件的变化，适用于包含静态页面<%@ include file=included.htm %>  =================================================================== 1. 静态include的...
JSP中动态include与静态include的区别介绍
10-26
在JavaServer Pages (JSP) 中，我们常常需要在页面之间共享代码或内容，这时候就会用到`<jsp:include>` 和 `<%@ include %>` 两种包含机制，它们分别是动态包含（Dynamic Include）和静态包含（Static Include）。...
jsp使用include静态包含实现登陆页面的制作(暂未实现登陆功能,仅为页面的制作)
hey，欢迎浏览我的博客，希望能给你提供帮助。
05-22 686
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <style> h3{
html页面 include方法,html中include include方式
weixin_34514378的博客
06-03 1946
与的区别1、#包含文件的相对路径，#包含文件的虚拟路径。2、在同一个虚拟目录内，!--#=""--和!--#=""--效果是相同的，但假设虚拟目录名为，则!--#includevirtual="myweb/file.asp"--也可以通过调试，但我们知道!--#includefile="myweb/file.asp"--是绝对要报错的。3、如果一个站点下有2个虚拟目录myweb1和myweb2，m...
在html 静态页面中引用外部页面 Include , 包含 ，嵌入
weixin_34273479的博客
11-26 8163
在asp、asp.net页面中引用外部页面很简单，使用以下语句就可以：<!--includefile="要引用的页面" ->但是在html静态页面中引用外部页面则没那么方便，主要方法有：1.使用框架来实现，但是那样占用线程较多，速度慢；<IFRAME NAME="neepage" width=100% height=30 ma...
html静态页面引入公共html页面
热门推荐
u010957390的博客
01-14 9万+
很多人问有什么方法不用模板引擎在普通静态html页面导入公共的html页面,比如header.html, footer.html, 在这里我是这样做的,自己写了一个include.js include.js代码如下 /** * Created by 张永风 on 2016/1/13. */ (function(window, document, undefined) { v
jquery实现静态html文件的include嵌入效果
csnewdn的专栏
12-26 5209
关闭 jquery实现静态html文件的include嵌入效果 标签： jqueryhtmlinclude 2014-10-31 16:54 7586人阅读 评论(0) 收藏 举报 分类： jquery（2） 版权声明：本文为博主原创文章，未经博主允许不得转载。 //引入jQuery的js
动态Include和静态Include的区别
weixin_45034110的博客
01-13 1418
1.语法上： 静态包含语法： <%@inclue file=“被包含的页面”%> 动态包含语法：　<jsp:include page=“被包含的页面”> 2.传递参数不同： 静态包含不能向被包含页面传递参数 动态包含可以使用jsp：param标签向被包含页面传递参数 3.原理不同 静态包含：先合并再翻译、<%@ include file=“被包含的页面”%>该指令在编译之前先读入指定的页面中的内容（并不对动态内容求值),融合后的完整页面再被整体的转换为一个servlet。
在html 静态页面中引用外部页面 Includ , 包含 ，嵌入
大鸾翔宇，遨游苍穹！
08-06 1984
在asp页面中引用外部页面很简单，使用以下语句就可以：include file="要引用的页面" ->但是在html 静态页面中引用外部页面则没那么方便，主要方法有：1.使用框架来实现，但是那样占用线程较多，速度慢；加上它的一些属性可以实现一些透明,无滚动条等具体的效果.大家可以html教程的相关介绍2.使用. js脚本来实现就是把相关的html文件转化为js文件.再在调用的时候用js">或，此时
JSP之include动态包含与静态包含
a631278993的博客
11-08 1139
转载请注明原文地址：http://www.cnblogs.com/ygj0930/p/6044676.html　 　JSP中，include是一个经常用到的标签。当应用程序中所有的页面的某些部分(如标题、页脚和导航栏)都相同的时候,我们就可以考虑用include。但是相同的部分有静态的（装载进页面显示后再也不变的），有动态的（装载进页面后还会改变，如：随时间改变、随用户行为改变等）。那...
jsp中静态include和动态include的区别
沐浴星光的少年的博客
10-08 803
动态 INCLUDE 用 jsp:include 动作实现  它总是会检查所含文件中的变化 , 适合用于包含动态页面 , 并且可以带参数。各个文件分别先编译，然后组合成一个文件。 静态 INCLUDE 用 include 伪码实现 , 定不会检查所含文件的变化 , 适用于包含静态页面  。先将文件的代码被原封不动地加入到了主页面从而合成一个文件，然后再进行翻译，此时不允许有相同的变量。 
html文件引入其它html文件的方法：include方式
wild_cowboy的博客
04-12 4万+
一个网站很多页面里面，一部分内容的代码是一样的，比如：head，footer，menu等。那么我们则可以写一个头部，一个尾部，一个menu然后引入到需要用的页面里面，则不需用写重复的代码了。include是在a.html里面嵌入b.html的代码，是将代码拼凑完整，而不是在浏览器中嵌入一个浏览器。　　这样的好处是，当重复代码修改一个小地方时候，只需在一个html里面修改，不需要重复修改代码，也不会...
JSP动态生成静态HTML页面的多种实现方法
本文将介绍几种方法来实现JSP生成静态HTML页面的过程，以便在不需要服务器参与的情况下提供静态内容。首先，我们关注于一种通过从数据库获取数据并在模板中替换特定标签的方法。 1. 使用JSP EL表达式和标签替换： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值