HTML页面引入另一个HTML页面,比如各个页面引入通用的网站头部、尾部、导航栏

您所在的位置:网站首页 怎么在html中加入css HTML页面引入另一个HTML页面,比如各个页面引入通用的网站头部、尾部、导航栏

HTML页面引入另一个HTML页面,比如各个页面引入通用的网站头部、尾部、导航栏

2024-01-22 02:48| 来源: 网络整理| 查看: 265

1. 使用HTML的link标签import另一个HTML页面

1.1 在HTML页面的标签内使用标签引入另一个HTML页面("centerHeader.html"),代码如下。

首页

1.2 在HTML页面的标签内引入另一个HTML页面的内容,代码如下。

document.write(cHeader.import.head.innerHTML); document.write(cHeader.import.body.innerHTML);

但是:博主一开始用的就是这种方式,后来才发现只有老版的浏览器才支持,新版浏览器已经弃用了。

 

2. 通过jQuery的get方法在当前HTML页面导入另一个HTML页面

2.1 在HTML页面的中的标签内,编写如下代码即可。

首页 $.get('centerHeader.html',function(data){ $("#header").html(data) });

但是:这种引入方式是静态的,无法动态更改(就是无法通过js对标签进行相应操作),对于页面头部“登录注册”区域需要动态展示无法满足。

 

3. 使用标签

3.1 通过在中编写标签引入另一HTML文件,代码如下。

首页

但是:这种方式也只适用静态页面,动态的话会变形,而且scrolling和frameborder这种属性都已经被弃用了。

 

4. 将另一个HTML页面作为js文件引入

4.1 先将HTML页面转换为js文件,其实也就是将html通过document对象写入,HTML转js网址在这里。

4.2 在相应位置引入即可,一般作为头部页面引入,那么放在标签中即可,如下。

首页

关键:这种方式不仅适用静态页面,还可以进行动态变化,目前使用中,没有不好的地方。

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3