HTML页面引入公共HTML部分

小李不是歪理

已于 2022-10-25 14:25:26 修改

阅读量2.3k

点赞数 1

文章标签： javascript 前端

于 2022-10-21 10:54:55 首次发布

本文链接：https://blog.csdn.net/weixin_48337755/article/details/127441641

版权

经过多番百度和亲自使用，找出了以下四种现行可用的方法；

各有优缺点，可选择适用方法使用；

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

通过 HTML转JS 将HTML转换为JavaScript，然后在相应的位置引入。

<script type="text/javascript" src="user_left.html"></script>

JavaScript引入

<div id="user_left"></div> 
<script type="text/javascript"> 
    $(document).ready(function () { 
        $('#user_left').load('user_left.html'); 
    }); 
</script>

<iframe>标签

通过在<body>中编写<iframe>标签引入另一HTML文件这种方式也只适用静态页面，高度不会自动适应

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

可通过页面加载完成之后获取页面高度，然后替换iframe的高度实现高度自适应

function setIframeHeight(){ 
    var height = document.documentElement.scrollHeight;         
    parent.document.getElementById('main').style.height = height + 'px'; 
}

<embed>标签

无法自适应宽高，需要提前设置好宽高

<embed type="text/html" src="user_left.html" style="width: 100%;height: 135px"/>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小李不是歪理

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

HTML静态页面引入公共html文件(ssi服务器端指令详解)

09-30

例如，要在HTML页面中包含另一个页面的内容，可以使用ssi指令如“”。这条指令告诉服务器将指定路径下的文件内容插入到当前文件中。 SSI指令除了包含文件，还可以用来执行...

Html页面对于导航及底部栏等公共部分的引用

ZaynahLy的博客

08-08

3万+

对于大多数网站来说，导航栏和底部的信息栏在多个页面中都是通用的。如果将这些代码放在每一个页面的html中，会显得代码冗余，而且修改起来也极为不方便。所以如果将这些代码放在单独的页面中，在其他页面直接引入的话，不仅代码量减少，而且在公共部分需要修改时，也只需要修改一处就可以了。引入页面公共部分的步骤： 1. 首先要将公共部分单独放在一个html页面中。这个页面必须是一个完整的页面，包含head,

参与评论您还未登录，请先登录后发表或查看评论

html引入公共的头部，导航栏，尾部

wushuoyouting的博客

03-23

4万+

很不错的文章，讲解html引入公共的头部，导航栏，尾部的很仔细^_^一、asp语言和PHP语言首先制作一个头部文件head.asp，或者一个底部文件foot.asp。如主页是index.asp，调用头部代码是在index.asp文件代码的开始位置（第一个标记后面，<head>标记前面）增加如下代码：<!– #include file=”head.asp” –> 调用...

HTML引用公共页面（header.html和footer.html）

senmu_的博客

11-02

3672

HTML引用公共页面（header.html和footer.html）我们做项目时，会发现许多页面有相同的部分，重复写会花费大量不必要的时间，复制的话修改不方便。只要我们把公共部分提取出来，单独写，在需要用的时候引入就可以。 <body> <div class="headerpage"></div> <div>...中间部分...</div> <div class="footerpage"></div> <scrip

引用html公共部分的方法

LUOZONGW的博客

10-21

5321

做前端项目时遇到导入公共部分的问题，因为合并的时候复制公共部分复制到吐。。

抽取HTML公共页面及引入公共页面

qq_44915190的博客

07-19

3016

抽取HTML公共页面及公共页面引入、Thymeleaf用法

html中引入公共的html页面几种方法

waillyer的博客

06-06

6242

一、使用jQuery的load函数 <body> <div id="header1"></div> <script> $("#header1").load("page/header1.html"); </script> </body> 注意:header1中不需要把整个代码写全，以为一个html中只能存在一个body标签，去掉所有的标签二、include标签 `{include

HTML引入公共部分

weixin_49561225的博客

08-04

1490

在首页需要引入的地方写入 <divid="page">需要引入的公共头部</div> <divclass="index">首页部分</index> 在js写入 <script> $("#page").load('./header.html') </script> 还有一点需要注意的是被引入的公共部分是单独一个文件，引进首页后是嵌套进入的，公共部分有a标签跳转是无法影响首页，如果想让产生链接公共部...

html静态页面引入公共html页面

热门推荐

u010957390的博客

01-14

9万+

很多人问有什么方法不用模板引擎在普通静态html页面导入公共的html页面,比如header.html, footer.html, 在这里我是这样做的,自己写了一个include.js include.js代码如下 /** * Created by 张永风 on 2016/1/13. */ (function(window, document, undefined) { v

HTML5公共页面提取作为公用代码的方法

01-19

在网站制作中有很多部分的代码是相同的，如footer部分，可以把这段代码提取出来，在别的页面调用。 index.html  [removed] $('.footer').load('conment/foot.html',function...

thinkphp5引入公共部分header、footer的方法详解

10-18

引入公共部分可以提高代码的复用性，减少重复代码，加快页面的加载速度，并且有助于对网站的整体布局进行统一管理和维护。本文将详细介绍如何在ThinkPHP5中引入公共的header和footer。首先，需要明确ThinkPHP5中...

Springboot访问html页面步骤解析

08-19

在 Spring Boot 中，如果我们想访问 HTML 页面，不需要每访问一个页面就写一个 Controller，我们可以统一写一个公共的 Controller 方法。首先，我们需要引入 Hutool 工具依赖。 ```xml  ...

html页面引入公共头部和尾部

csl125的博客

03-05

2万+

如何在HTML不同的页面中，共用头部与尾部？一、asp语言和PHP语言首先制作一个头部文件head.asp，或者一个底部文件foot.asp。如主页是index.asp，调用头部代码是在index.asp文件代码的开始位置（第一个标记后面，<head>标记前面）增加如下代码： <!– #include file=”head.asp” –> 调用共用底部...

如何在 HTML 中嵌套、引入其他的 HTML？

Moon Star

02-27

2196

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

html公共部分（如:header、footer、架构样式相同）引用

狂野的鬼

03-30

2597

常用以下方式引入 iframe 引入 PHP/ASP.NET——include 引入通过jquery请求的方式引用通过<！--#include virtual="header.html"-->的方式引用 Clam方式引入目录常用以下方式引入方法一：iframe 引入：缺点：方法二：include方式方法三：JS引入方法四：clam 总结方法一：iframe 引入：在需要插入的地方写入以下内容，地址为你的公共页面所在地址；方法..

引入公共部分的html页面

丑小鸭变黑天鹅的博客

04-14

1271

引入公共部分的html页面一、问题描述二、方法一，使用jquery提供的load方法三、方法二，使用$.get()方法一、问题描述在日常开发中，我们会遇到这样的问题。比如说一个完整的网页，几乎每个页面都用到了相同的头部和底部，那么你是在每个页面都重复的写一遍一模一样的代码吗？这样会使代码冗余，并且没有工作效率。那么我们就可以考虑将相同代码提取出来，单独放到一个页面，然后那个页面需要，我们引入即可。下面我介绍几种方法。二、方法一，使用jquery提供的load方法接下来看代码 header页面 &l

怎么在html中引入公共的html页面，如header.html,footer.html

luckydie的博客

10-25

3万+

我们在做项目的时候经常会遇到一样的头部和底部，如果每个页面都复制一遍，不仅工作量大而且万一需要修改一下文章就更麻烦了，这时候就需要我们把公共部分提取出来，等需要的时候再引入页面。在网上找了好久，也尝试了几次，觉得对前端来说最好的方法就是使用jQuery的load函数， <body> <div id="page1"></div> <div...

html用标签引入公共页面,html公共部分-header、footer部分引用

weixin_42361933的博客

06-03

1456

html公共部分-header、footer部分引用主要介绍两种方式：1、通过jq 以请求的方式加载2、通过的方式加载两种方式各有优缺点，先说第一种。用jq方式加载：需要被引用的页面header.html里面只是头部的dom结构。不需要其他的标签我是头部公用样式需要引用header的页面index.html...//head省略//引入jq//需要被插入的地方//通过jq的load方法以ajax的...

【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台

HTML页面引入公共HTML部分

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

JavaScript引入

<iframe>标签

<embed>标签