html 提取 公用部分
在写HTML时,总会遇到一些公用部分,如果每个页面都写那就很麻烦,并且代码量大大增加。
网上查询了几种方法:
1、es6 的 embed 标签。
<embed src="header.html" type="text/html">
2、使用iframe。
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="header.html" height="auto" width="100%"></iframe>
3、使用object。
<object style="border:0px" type="text/x-scriptlet" data="header.html" width=100% height=auto></object>
这几种都能插入,但是实际插入和iframe一样,还是有最外层的html,header,body等外层元素。
4、将HTML转化为js,然后引入js 文件。工具网址:http://tool.chinaz.com/Tools/Html_Js.aspx
这样插入的就是只有 转化的HTML部分。
比如:
footer.html
<footer>
<div>版权信息版权信息版权信息版权信息版权信息</div>
</footer>
转化后 footer.js
document.writeln("<footer>");
document.writeln(" <div>版权信息版权信息版权信息版权信息版权信息</div>");
document.writeln("</footer>");
这样引入是没有外层那些标签的。如下:

至于有事件,可以直接获取DOM进行操作。
html 提取 公用部分的更多相关文章
- [ionic开源项目教程] - 第13讲 Service层优化,提取公用Service,以及生活和农业两大模块的实现
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现生活和农业两大模块的实现,在这个过程中,对service层提取出一个公用的BaseService. 这一讲分为 ...
- webpack4 自学笔记三(提取公用代码)
全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/commonT ...
- vue-cli3 DllPlugin 提取公用库
vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间.开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的.如果能把这些库文件提取出来 ...
- js提取135编辑器相同的css
135编辑器导入的内容,有重复的很多css,导致加载很慢,只能去掉 function remove135FormatContent(content){ if(!content) return ''; ...
- 用H5中的Canvas等技术制作海报
在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...
- 一张H5游戏页引起的思考
最近开发了一个移动端的端午活动页面,做完后就想写点东西总结一下,感受最深的就是打草稿. 刚开始并没有打草稿,直接开干,越做到后面就越觉得代码很乱很杂,非常不舒服,做到哪个页面写这个页面的CSS,没有大 ...
- webpack详细配置讲解
//常见的Webpack配置文件var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugi ...
- webpack入门
一,为什么用webpack 1.由于项目中资源的多样性和依赖性 2.js模块规范复杂化 3.开发与线上文件不一致性 二.webpack 特性 1.对CommonJS.AMD.ES6语法兼容 2.对js ...
- react-router+webpack+gulp路由实例
背景:新项目要开始了,有一种想要在新项目中使用react的冲动,应该也是一个单页面的应用,单页应用就涉及到一个路由的问题.于是最近在网上找了蛮多关于react-router的文章,也遇到了许多的坑,经 ...
随机推荐
- 如何理解Minkowski不等式
[转载请注明出处]http://www.cnblogs.com/mashiqi 2017/02/16 Minkowski不等式: 设$f$是$\mathbb{R}^n \times \mathbb{R ...
- matlab学习(4) any 和cellfun用法
1.对于向量来说,只要包含非0元素,则返回为1: 2.对于矩阵来说,any(X)依次判断X的每一列是否为ture,返回一个含0或1的向量. 3.any(X,DIM)对X的第DIM维操作, DIM=1即 ...
- Python全栈之路----函数----嵌套函数
函数内部可以再次定义函数 要执行函数,必须调用 def func1(): print('alex') def func2(): print('eric') func2() #如果没有这一句,不会pri ...
- LCA - Tarjan 算法
void dfs(int u) { ; i <= n; i++) { if(visit[i]&&ask[u][i]) { LCA[u][i] = Find(i); } } vis ...
- LiquiBase 学习
preconditions mysql database is installed maven has been setted up properly add depedenceies apply p ...
- PTA寒假二
7-1 币值转换 (20 分) 输入一个整数(位数不超过9位)代表一个人民币值(单位为元),请转换成财务要求的大写中文格式.如23108元,转换后变成"贰万叁仟壹百零捌"元.为了简 ...
- mvc项目用log4net 记录错误日志
1. 首先下载lognet 下载地址 http://logging.apache.org/log4net/download_log4net.cgi 2.找到bin文件中的net文件夹 之后看你电脑 ...
- Mysql索引会失效的几种情况
1.如果条件中有or,即使其中有条件带索引也不会使用(这也是为什么尽量少用or的原因): 2.对于多列索引,不是使用的第一部分,则不会使用索引: 3.like查询是以%开头: 4.如果列类型是字符串, ...
- OpenSSL-Win32,rsa,私钥,公钥,1024,2048
默认是rsa_private_key1024.pem , PEM格式私钥,C# ,PHP 用. 再生成 pkcs8 格式私钥, JAVA 用. 公钥无格式区分. 1024 的: openssl.exe ...
- LeetCode - 刷题经验
1.加快代码速度 刷了前面几道题发现速度总是处于尾部10%,刚开始非常不服,后来仔细一看那些排名靠前的提交,发现了猫腻.几乎每一个提交都有这样的一段代码: static const auto io_s ...