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的文章,也遇到了许多的坑,经 ...
随机推荐
- 3.3 unittest批量执行
3.3 unittest批量执行 我们在写用例的时候,单个脚本的用例好执行,那么多个脚本的时候,如何批量执行呢?这时候就需要用到unittet里面的discover方法来加载用例了.加载用例后,用un ...
- sqlite数据库操作
1.创建表 import sqlite3 conn = sqlite3.connect('C:\\Users\\Kuma\\Desktop\\spider.db') print('connect su ...
- Angular新手容易碰到的坑
在Angular群里回答新手问题一段时间了,有一些Angular方面的坑留在这里备查,希望能对各位有所帮助.这个文章将来会随时更新,不会单独开新章,欢迎各位订阅. Q1.<div ng-incl ...
- InnoDB引擎体系架构
InnoDB引擎架构介绍 innodb存储引擎的体系架构,可简单划分成三层: 数据文件 :磁盘上的数据文件 内存池:缓存磁盘上的数据,方便读取,同时在对磁盘文件数据修改之前在这里缓存,然后按一定规刷新 ...
- CIFAR10数据可视化
一.数据准备 下载cifar-10-binary.tar.gz并解压,其中有多个bin文件,现对data_batch_1.bin进行可视化. 二.数据说明 该二进制文件存储的有10000张32X32的 ...
- mysql 远程备份
#远程备份./innobackupex --defaults-file=/etc/my.cnf --no-timestamp --user xxx --host 192.168.1.123 \--pa ...
- LiveBindings如何绑定一个对象(转)
原文 http://www.malcolmgroves.com/blog/?p=1084 一.新建VCL工程加入TAdapterBingSource控件 二.定一个TPerson类 MyPerson ...
- spingMVC+mybatis+spring-session共享内存配置
1. redis依赖: <dependency> <groupId>org.springframework.session</groupId> <artifa ...
- Lock和synchronized的区别和使用
Java并发编程:Lock 今天看了并发实践这本书的ReentantLock这章,感觉对ReentantLock还是不够熟悉,有许多疑问,所有在网上找了很多文章看了一下,总体说的不够详细,重点和焦点问 ...
- git 一个分支完全覆盖另一个分支
1,git push origin develop:master -f就可以把本地的develop分支强制(-f)推送到远程master 2,git checkout master // 切换到旧的分 ...