在HTML页面中引入另一个HTML文件内容

最新推荐文章于 2023-07-15 23:05:07 发布
最新推荐文章于 2023-07-15 23:05:07 发布
阅读量8.8k 收藏 20
点赞数 3
分类专栏： # JavaScript 文章标签： 前端 HTML JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnds123321/article/details/102768757
版权

一、在<head>标签中使用import引入

include.html

<meta charset="utf-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- 导入基本样式 -->
<link rel="stylesheet" href="/css/default.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="/js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/js/bootstrap.min.js"></script>

test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>include标题</title>
		<!-- 引入include.html文件内容 -->
		<link rel="import" href="include.html" />
	</head>
	<body>

	</body>
</html>

二、使用jQuery导入HTML内容

header.html

<header>
	<h1>这是页面顶部内容</h1>
</header>

footer.html

<footer>
	<h1>这是页面底部内容</h1>
</footer>

test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<header id="headerContent"></header>
		<div>
			这是整个页面的中心内容
		</div>
		<footer id="footerContent"></footer>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#headerContent").load("header.html");
			$("#footerContent").load("footer.html");
		});
	</script>
</html>

效果展示：

二木成林
关注
  • 3
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 多页面合并,让多个HTML页面 使用 同一段HTML代码
weixin_39738152的博客
06-03 6007
需求背景一个网站有多个网页；一个网页，可以分为很多部分，举个例子，下面是一个特别简单的网页结构：一般情况下，footer都是用于标识网站的相关信息(备案、联系方式、制作方)，每一个页面都是相同的，如果又100个这样的页面，如果在每一个页面都写这么一段html代码，那么，无疑是特别难受的，另外，这个也不利于修改，一旦要修改，每个页面都要改一次，即使利用编辑器的全局替换，那也是不放心的，万一有一个页面...
在js文件中引入（调用）另一个js文件的三种方法
10-14
在JavaScript编程中，有时我们需要在一个JS文件中使用另一个JS文件中的功能或变量。这可以通过引入或调用外部JS文件来实现。以下详细介绍了三种在JS文件中引入另一个JS文件的方法。 **方法一：通过`<script>`标签...
from __future__ import absolute_import的作用
桑凯旋的博客
10-29 1149
关于这句 from __future__ import absolute_import 的作用: 直观地看就是说”加入绝对引入这个新特性”。说到绝对引入，当然就会想到相对引入。那么什么是相对引入呢?比如说，你的包结构是这样的: pkg/ pkg/init.py pkg/main.py pkg/string.py 如果你在 main.py 中写 import string ,那么在Python 2.4 或之前, Python 会先查找当前目录下有没有 string.py, 若找到了，则引入该模块，然后你在
如何使用html在前端导入文档,手把手教你在html中引入另一个html文件的方法（详解）_WEB前端开发...
weixin_35868133的博客
06-04 1339
一起来聊聊html与HTML5的区别_WEB前端开发今天有人问我了，你经常用html5还是html？emmm其实自己在平时写网页时，对这两者没有特意区分。如果非要说区别的话，显而易见的区别就是下面我列出来的这些了。html中引入调用另一个html的方法，尝试了好几种，都列出来：其中第一种是最好的，其他的方法，可以尝试看看，是不是适合你当前项目一、p+$(“#page1”).load(“b.html...
html中引入调用另一个html的方法
weixin_30667301的博客
02-24 3196
html中引入调用另一个html的方法，尝试了好几种，都列出来： 其中第一种是最好的，其他的方法，可以尝试看看，是不是适合你当前项目 一、div+$(“#page1”).load(“b.html”) 参考代码： <body> <div id="page1"></div> <div id="page2"><...
如何在主html文件中引入另外一个html文件
最新发布
weixin_62495505的博客
07-15 2861
引用html代码的最简单方式
html中引入另一个html
夏已微凉、
12-14 1313
html中引入调用另一个html的方法，尝试了好几种，都列出来：  其中第一种是最好的，其他的方法，可以尝试看看，是不是适合你当前项目 一、div+$(“#page1”).load(“b.html”)  参考代码： &lt;body&gt; &lt;div id="page1"&gt;&lt;/div&gt; &lt;div id="page2"&gt;&lt;/div&am
怎样将html页面引入另一个html页面
m0_63263973的博客
08-05 3655
在写前端时，经常需要好几个页面用到同一部分内容，例如导航栏这样的。
vue在index.html中引入静态文件不生效问题及解决方法
11-28
第一种可能出现原因就是引入的静态文件在src文件夹内，这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static，这种的解决办法更改配置文件，把对应的...
单文件HTML本地引入elementUI
04-18
在“单文件HTML本地引入ElementUI”的场景下，我们需要在不使用构建工具（如Webpack或Rollup）的情况下，仅通过一个HTML文件来加载并使用ElementUI的所有资源。这种做法适用于小型项目或者快速原型开发，它简化了...
HTML静态页面引入公共html文件(ssi服务器端指令详解)
09-30
今天为大家介绍一种在HTML静态文件中引用其它HTML静态文件的方法SSI的详细使用方法与指令介绍
在html中引入外部js文件,并调用带参函数的方法
10-21
通常，HTML文件（如`test.html`）和JavaScript文件（如`a.js`）会放在同一个目录下，或者JavaScript文件位于一个专门存放脚本的子目录中。这样的组织方式有利于管理和引用资源。 接下来，我们编写`a.js`文件，这是...
在一个html里面引入另一个html的几种方法
HDdgut的博客
09-25 5047
1.iframe 2.js的load函数，$(“#page1”).load(“b.html”) 3.object 4.import(只能引入css文件) 5.include 6.<frameset> <frame ><frame ></frameset>
html中引入调用另一个html的方法有很多种
时光留不住，毕竟东流去
06-29 1万+
发现html中引入调用另一个html的方法有很多种，我都尝试了一下，就把他们都列出来吧： 其中推荐第一种和第六种，因为代码太长就写在最后了。其他的方法，可以自己尝试，看是不是适合你当前项目。 一、需要借助 jquery div+$("#page1").load(“b.html”) 。 参考代码： <body> <div id="page1"></div> <div id="page2"></div> <script&g
在html文件引入其它html文件的几种方法
微笑的黄捷
08-27 2336
简介：在论坛中常常有网友问到，可以在一个html的文件当中读取另一个html文件的内容吗？答案是确定的，而且方法不只一种，在以前我只会使用iframe来引用，后来发现了另外的几种方法，那今天就总结这几种方法让大家参考一下，本人觉得第三种方式较好！ 1.IFrame引入，看看下面的代码 程序代码:   "content_frame" width=100% height=30 marg
在HTML文件引入其它HTML文件的几种方法
waterborn的专栏
08-16 1201
1.IFrame引入，看看下面的代码 -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- 你会看到一个外部引入的文件，
webpack使用html-loader加载js中引入的html资源
weixin_45047039的博客
11-28 4146
webpack使用html-loader加载js中引入的html资源一、如何使用html-loader二、html-loader配置 一、如何使用html-loader 安装yarn add html-loader --dev 配置webpack.config.js module.exports = { ..., // 其他配置 module:{ rules:[ { test:/.html$/,
html页面引入另一html
热门推荐
高欣的博客
06-26 1万+
以引入头页面为例： 头页面：top.html 主页面：index.html top.html中该怎么写就怎么写，head与body中改写什么还是什么。 index.html中：（路径的问题参考自己的路径，我的是在同一目录下） ...
js中引入另一个js文件不通过html
05-24
在JavaScript中，可以使用`<script>`标签来引入其他JavaScript文件，但如果你想不通过HTML文件来引入另一个JavaScript文件的话，你可以使用以下方法： 1. 使用XMLHttpRequest对象来获取JavaScript文件内容，然后使用Eval()函数来执行JavaScript代码。 ``` var xhr = new XMLHttpRequest(); xhr.open("GET", "path/to/javascript/file.js", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { eval(xhr.responseText); } }; xhr.send(); ``` 2. 动态创建一个`<script>`标签，然后将其添加到页面中。 ``` var script = document.createElement('script'); script.src = 'path/to/javascript/file.js'; document.head.appendChild(script); ``` 这将创建一个新的`<script>`标签，并将其添加到页面的`<head>`部分。页面将下载并执行指定的JavaScript文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值