在写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 提取 公用部分的更多相关文章

  1. [ionic开源项目教程] - 第13讲 Service层优化,提取公用Service,以及生活和农业两大模块的实现

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现生活和农业两大模块的实现,在这个过程中,对service层提取出一个公用的BaseService. 这一讲分为 ...

  2. webpack4 自学笔记三(提取公用代码)

    全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/commonT ...

  3. vue-cli3 DllPlugin 提取公用库

    vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间.开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的.如果能把这些库文件提取出来 ...

  4. js提取135编辑器相同的css

    135编辑器导入的内容,有重复的很多css,导致加载很慢,只能去掉 function remove135FormatContent(content){ if(!content) return ''; ...

  5. 用H5中的Canvas等技术制作海报

    在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...

  6. 一张H5游戏页引起的思考

    最近开发了一个移动端的端午活动页面,做完后就想写点东西总结一下,感受最深的就是打草稿. 刚开始并没有打草稿,直接开干,越做到后面就越觉得代码很乱很杂,非常不舒服,做到哪个页面写这个页面的CSS,没有大 ...

  7. webpack详细配置讲解

    //常见的Webpack配置文件var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugi ...

  8. webpack入门

    一,为什么用webpack 1.由于项目中资源的多样性和依赖性 2.js模块规范复杂化 3.开发与线上文件不一致性 二.webpack 特性 1.对CommonJS.AMD.ES6语法兼容 2.对js ...

  9. react-router+webpack+gulp路由实例

    背景:新项目要开始了,有一种想要在新项目中使用react的冲动,应该也是一个单页面的应用,单页应用就涉及到一个路由的问题.于是最近在网上找了蛮多关于react-router的文章,也遇到了许多的坑,经 ...

随机推荐

  1. 用vs2008打开vs2005项目

    1 使用记事本打开*.sln解决方案文件,将Visual Studio 2005改为Visual Studio 2008 将版本号改为9.00 2 打开扩展名为*.csproj的项目文件,在Defau ...

  2. Visual Studio AI 离线模型训练(Windows10)

    一.序 环境搭建:[查看] samples-for-ai项目下载:[下载],两个版本,一个2018年6月15日前,一个2018年6月15日-16日版本(当前最新版本). 在环境搭建过程中,通过git ...

  3. PTA——完全数

    PTA 7-45 找完数 网友“云上明月”的程序: #include<stdio.h> int isPerfect(int num); int main() { ; int maxFact ...

  4. fromkeys()

    #fromkeys() #说明:用于创建一个新字典,以序列seq中元素做字典的键,value为字典所有键对应的初始值 #案例 d=[1,2,3] dict={} dict=dict.fromkeys( ...

  5. 推荐一些关于学习Html Css和Js的书吗?

    前端易学易懂,随着移动互联网的日益兴起,it行业对于前端的需求也在不断的提高,那么从前端小白修炼成为前端大神的这个过程之中,一些必备的枕边书也是必不可少的. 第一本,入门<Head first ...

  6. Javascript 将一个句子中的单词首字母转成大写

    Javascript 将一个句子中的单词首字母转成大写 先上代码 function titleCase(str) { str = str.toLowerCase().split(" &quo ...

  7. mongodb集群配置主从模式

    测试环境 操作系统:CentOS 7.2 最小化安装 主服务器IP地址:192.168.197.21 master-node 从服务器IP地址:192.168.197.22 slave-node 关闭 ...

  8. nginx配置http强制跳转https

    nginx配置http强制跳转https 网站添加了https证书后,当http方式访问网站时就会报404错误,所以需要做http到https的强制跳转设置. 一.采用nginx的rewrite方法 ...

  9. Xtrabackup的安装与使用

    Xtrabackup的安装与使用 1. XtraBackup 简介 XtraBackup(PXB) 工具是 Percona 公司用 perl 语言开发的一个用于 MySQL 数据库物理热备的备份工具, ...

  10. Win7系统安装Centos7.0双系统(一)

    项目环境测试,过去在虚拟机安装只要配置好镜像很快就可以轻松安装,但是在真实机中安装就有些略坑.网上有很多说法是把iso文件中安装引导拷出来,试了很久还是觉得U盘镜像直接安装更便捷.靠谱.因为CentO ...