Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >html引入另一html

html引入另一html

作者头像
似水的流年
发布于 2019-12-07 11:40:59
发布于 2019-12-07 11:40:59
4.6K00
代码可运行
举报
文章被收录于专栏:电光石火电光石火
运行总次数:0
代码可运行
include 引入(涉及到一个从网上扒的封装函数,下面有)(head和body标签中的数据直接引入)
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
    <!--include引入,顺序很重要-->
    <script src="js/include.js"></script>
    <include src="top.html"></include>
    <include src="center.html"></include>
    <div id="">
        <p>你没有看错,我在这!</p>
    </div>
    <include src="fotter.html"></include>
</body>

include.js压缩代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
(function(window,document,undefined){var Include39485748323=function(){};Include39485748323.prototype={forEach:function(array,callback){var size=array.length;for(var i=size-1;i>=0;i-=1){callback.apply(array[i],[i])}},getFilePath:function(){var curWwwPath=window.document.location.href;var pathName=window.document.location.pathname;var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName));var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1);return localhostPaht+projectName},getFileContent:function(url){var ie=navigator.userAgent.indexOf('MSIE')>0;var o=ie?new ActiveXObject('Microsoft.XMLHTTP'):new XMLHttpRequest();o.open('get',url,false);o.send(null);return o.responseText},parseNode:function(content){var objE=document.createElement("div");objE.innerHTML=content;return objE.childNodes},executeScript:function(content){var mac=/<script>([\s\S]*?)<\/script>/g;var r="";while(r=mac.exec(content)){eval(r[1])}},getHtml:function(content){var mac=/<script>([\s\S]*?)<\/script>/g;content.replace(mac,"");return content},getPrevCount:function(src){var mac=/\.\.\//g;var count=0;while(mac.exec(src)){count+=1}return count},getRequestUrl:function(filePath,src){if(/http:\/\//g.test(src)){return src}var prevCount=this.getPrevCount(src);while(prevCount--){filePath=filePath.substring(0,filePath.substr(1).lastIndexOf('/')+1)}return filePath+"/"+src.replace(/\.\.\//g,"")},replaceIncludeElements:function(){var $this=this;var filePath=$this.getFilePath();var includeTals=document.getElementsByTagName("include");this.forEach(includeTals,function(){var src=this.getAttribute("src");var content=$this.getFileContent($this.getRequestUrl(filePath,src));var parent=this.parentNode;var includeNodes=$this.parseNode($this.getHtml(content));var size=includeNodes.length;for(var i=0;i<size;i+=1){parent.insertBefore(includeNodes[0],this)}$this.executeScript(content);parent.removeChild(this);})}};window.onload=function(){new Include39485748323().replaceIncludeElements()}})(window,document);

参考原文:https://www.jianshu.com/p/c4f18bea8cab

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-07-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
html中引入调用另一个公用html模板文件的方法
查了一下资料,发现html中引入调用另一个html的方法有很多种,我都尝试了一下,就把他们都列出来吧: 其中推荐第一种和第六种,因为代码太长就写在最后了。其他的方法,可以自己尝试,看是不是适合你当前项目。
德顺
2019/11/13
9K0
html中引入调用另一个公用html模板文件的方法
使用PageOffice实现文档(word,excel,pdf)在线预览编辑[通俗易懂]
首先自己需要安装PageOffice控件 目前最新版本是4.2 。下载地址是:http://www.zhuozhengsoft.com/dowm/ 其中包括实例代码。
全栈程序员站长
2022/08/18
7.2K0
【Web技术】981- 手摸手之前端覆盖率实践
https://juejin.cn/post/6959147556295180324
pingan8787
2021/06/24
1.3K0
35·灵魂前端工程师养成-使用nodejs实现简单nginx功能
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/10/31
6620
35·灵魂前端工程师养成-使用nodejs实现简单nginx功能
ASP.NET MVC基于WebUploader大文件分片上传、断网续传、秒传
我们这里只讲分片上传,至于断网续传和秒传已经写好Demo,下载地址放在文末,有兴趣的可以下载自己玩玩。
郑子铭
2023/08/30
5140
ASP.NET MVC基于WebUploader大文件分片上传、断网续传、秒传
写html页面没意思,来挑战chrome插件开发
谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序,可以为用户提供额外的功能和定制化的体验。谷歌浏览器插件通常由HTML、CSS和JavaScript组成,非常利于前端开发者。 开发者可以利用这些技术在浏览器中添加新的功能、修改现有功能或者与网页进行交互。
winty
2024/04/25
5960
写html页面没意思,来挑战chrome插件开发
前端实时消息提示的效果-websocket长轮询
WebSocket是html5新增加的特性之一,可以实现客户端和服务器彼此之间相互通信,也可以实现跨域通信,目前大部分主流浏览器都支持,iE浏览器需要10版本以上。 需求:公司项目有一个报警模块,当后
王小婷
2018/06/05
9650
layui三级菜单渲染
项目做完了,可以有时间写写博客了。 今天给大家讲解一下layui的三级动态加载菜单含后端代码。 我是最近刚学的layui,非常感谢贤心大神。开发出这么牛逼ui的框架。 声明:KingYiFan前段
猿码优创
2019/07/27
2.6K1
36·灵魂前端工程师养成-[前后分离]AJAX实战Cookie、Session
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/09/26
8130
36·灵魂前端工程师养成-[前后分离]AJAX实战Cookie、Session
JavaScript 常用方法总结
经常使用的 JS 方法,今天记下,以便以后查询 /* 手机类型判断 */ var BrowserInfo = { userAgent: navigator.userAgent.toLowerCase() isAndroid: Boolean(navigator.userAgent.match(/android/ig)), isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)), isIpad: Boolean(navigator.userA
前朝楚水
2018/04/02
1.3K0
文件上传到oss代码片段
import axios from '@/global/axios.js' let expire = 0 let accessKeyId let policy let signature let host let callback // 获取policy function getPolicy (file, filePath, changeSize, callbackImg) { // 可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲 let n
山河木马
2019/03/05
24.7K1
项目开发知识盲区整理2
把@SpringBootTest()注解改成@SpringBootTest(classes = App.class)就可以了。就像这样:
大忽悠爱学习
2021/11/15
6590
HT for Web的HTML5树组件延迟加载技术实现
HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的
HT for Web
2018/01/03
2.2K0
HT for Web的HTML5树组件延迟加载技术实现
jQuery的ztree仿windows文件新建和拖拽效果
前面的话:zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。
王小婷
2018/12/24
2.1K0
forEach循环实现卡片列表
jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html> <html lang="en"> <head> <% String path = request.getRequestURI(); Strin
王小婷
2019/05/06
4.6K0
forEach循环实现卡片列表
表格插件-bootstrap table的分页使用示例
4:完整的添加数据之后显示在表格里面,自动分页代码,删除和编辑效果 jsp界面 :
王小婷
2018/12/13
3.5K0
表格插件-bootstrap table的分页使用示例
springboot展示页面(及关于ajax中页面不跳转问题)
当按钮typ为submit时,在ajax的success的方法中window.location,href跳转不起作用;
JQ实验室
2022/02/10
2.2K0
jQuery+ajax实现简单的上传图片功能
在前面的文章里面有写到,用vue上传图片的功能,vue-element-admin上传图片的功能:https://www.jianshu.com/p/383e1f2f4276,那如果是在jQuery里面,图片上传要怎么写?今天记录一个jQuery+ajax实现简单的上传图片功能。
王小婷
2020/10/28
1.2K0
03 . 前端之JavaScipt
语法: splice(index,howmany,item1,.....,itemX)
iginkgo18
2020/09/27
1.5K0
03 . 前端之JavaScipt
32·灵魂前端工程师养成-[前后分离]AJAX原理及JSON详解
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/10/31
1.3K0
32·灵魂前端工程师养成-[前后分离]AJAX原理及JSON详解
相关推荐
html中引入调用另一个公用html模板文件的方法
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档