HTML页面如何引入其他HTML页面

在日常开发中，书写的HTML页面往往不是独立或互不通用，通常是有些头部、尾部或者其他部分是公用的，但是HTML有不同JSP页面可以使用类似include这样的动作标记，所以接下来介绍一种HTML页面引入其他HTML页面的方法。

第一种方式:
1.书写一个include.js,把公共的部分页面写入到里面

$(function () {$.get("header.html",function (data) {$("#header").html(data);});$.get("footer.html",function (data) {$("#footer").html(data);});
});

2.引入，只需用一个DIV，填跟上面的id名称就可引入

第二种方式：

<iframe src="header.html" width="100%" frameborder="0" scrolling="no"></iframe>

src：要引入的HTML文件
width：宽度
frameborder：边框
scrolling:滚动条

HTML页面如何引入其他HTML页面相关推荐

前端页面如何引入公用的页面header和footer
很多时候我们做网站开发的时候会遇到一个比较有趣的问题,那就是我们每个页面使用的footer和header,于是当然我们有办法在每个页面都相同的html标签,显然这样代码的复用程度是很低的,我们需要想到 ...
引入html页面比较,前端页面如何引入公用的页面header和footer
很多时候我们做网站开发的时候会遇到一个比较有趣的问题,那就是我们每个页面使用的footer和header,于是当然我们有办法在每个页面都相同的html标签,显然这样代码的复用程度是很低的,我们需要想到 ...
怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...
同一页面中引入多个JS库产生的冲突解决方案(转)
发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用'$'符号作为其代号.因此在一个页面中引入多个JS库,并且使用'$'作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...
【转】Vue.js入门教程（二）在页面中引入vue的方式
第二章:安装和基础效果展示页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
vue 项目在index.html页面直接引入jq库，报错$ is not defined解决方案
近日在vue项目开发中遇到一个问题:vue 项目在index.html页面直接引入jq库,报错$ is not defined解决方案... 首先说一下为什么会出现这个错误,其实项目发布到线上是不会出 ...
如何在vue页面中引入其他的子组件？(局部引入/全局引入)
在页面中引入子组件分为局部引入和全局引入,局部引入顾名思义就是只在当前页面引入且只在当前页面显示,全局引入即引入后在所有页面都显示. 首先我们创建两个页面Test.vue和Tset2.vue: 起始效 ...
thymeleaf页面中引入公共页面
一.前言当我们在html页面使用thymeleaf时,经常会遇到这样的情况.有一些html片段在我们所有页面都存在,造成了代码重复.遇到这种场景,我们就可以把公共代码段抽取到一个公共页面,在需要使用 ...
html 多个插件,webpack中html-webpack-plugin插件的使用（生成多个html页面，引入不同的js文件）...
以html-webpack-plugin插件为例 1.先安装插件,在命令行中输入:npm i -D html-webpack-plugin(执行完之后,在package.js的devDependen ...
npm的插件如何直接在html中使用,webpack中html-webpack-plugin插件的使用（生成多个html页面，引入不一样的js文件）...
以html-webpack-plugin插件为例javascript 一.先安装插件,在命令行中输入:npm i -D html-webpack-plugin(执行完以后,在package.js的d ...

HTML页面如何引入其他HTML页面

HTML页面如何引入其他HTML页面

HTML页面如何引入其他HTML页面相关推荐

最新文章

热门文章