You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5.9 KiB
5.9 KiB
在 html 中引用 html 或 html片断 的方式
在静态站点的制作中，有些像通用菜单、头部、页脚等是统一的，如果在各页页中都复制一分对于修改是个空难级影响。 以下是几种在html中引用另一个 html 文件的方式。
本示例中被引用的html片断文件为 import.html；方便起见，引用和被引用的html文件牌同一目录(当然也可以不同)。
纯 html 方式
- 使用：ifreame 标签
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>使用iframe标签引用html文件</title>
<base href="/" />
</head>
<body>
<div>
其它内容
</div>
<!-- 使用iframe标签引用html文件 -->
<iframe
<!-- 各种属性 -->
name="content_frame"
width="100%"
height="30px"
marginwidth = 0
marginheight=0
src="import.html" >
</iframe>
<div>
其它内容
</div>
</body>
</html>
<!-- 优点：兼容性好，方便快捷 -->
<!-- 缺点：
0、父文档必须多加一个 <iframe> 标签
1、必须是完整的html结构; html片断 会被浏览器自动添加成完整的html结构
2、布局流独立，样式独立
3、浏览器当两个独立网页
4、样式和调试不太方便
-->
- 使用：object 标签
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>使用 "object标签" 引用html文件</title>
</head>
<body>
<div>
其它内容
</div>
<!-- 使用 "object标签" 引用html文件 -->
<object
<!-- 各种属性 -->
style="border:0px"
type="text/x-scriptlet"
data="import.html"
width=100%
height=30 >
</object>
<div>
其它内容
</div>
</body>
</html>
<!-- 优点：
1、兼容性好
2、使用方便，无依赖
-->
<!-- 缺点：
0、父文档必须多加一个 <object> 标签
1、必须是完整的html结构; html片断 会被浏览器自动添加成完整的html结构
2、浏览器当两个独立网页
3、样式和调试不太方便
-->
- 使用：link 标签 [实现困难]
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>使用iframe标签引用html文件</title>
<base href="/" />
<link rel="import" href="page/Page_1.html" id="page1"></head>
</head>
<body>
<div>
其它内容
</div>
<!-- 使用link标签的import引用html文件 -->
<div>
其它内容
</div>
</body>
</html>
<!-- 优点： 理论上是最好的试
-->
<!-- 缺点：
1、浏览器支持不好：
IE、firefox等不支持;chrome、新Edge支持，老版本可能要打开设置：chrome://flags 启用：HTML imports
或者使用兼容js插件
2、实现困难，对浏览器要求高，目前没能实现；
3、扩大兼容的话，要引入js库，还要进行浏览器设置；
4、如果要引入js插件，不如直接使用js或jQuery了。
-->
- bootstrap 的 panel 组件，或者 easyui 的 window 组件
<!-- 优点：与UI框架集成，方便实现多种效果 -->
<!-- 缺点：需要引用较重的UI框架，不如使用原生js或jQuery-->
使用 js 配合
- 原生 js
<!-- 大体步骤：
1、远程请求html文件：使用xhrRequest请求或者fetch请求(fetch注意浏览器的兼容性)
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用js</title>
<link rel="stylesheet" href="./css/app.css">
</head>
<body>
<div class="container">
<div class="menu">
<div class="import-box">
加载中......
</div>
</div>
<div class="context">
<span>主页内容区</span>
</div>
</div>
<script>
fetch("./Import.html")
.then(response=> response.text())
.then(text=> document.getElementsByClassName("import-box")[0].innerHTML = text);
</script>
</body>
</html>
<!-- 优点：
1、原生兼容性好
2、不需要引入第三方库
-->
<!-- 缺点：
1、需要一个唯一的父元素
2、代码开发没有使用框架方便
-->
- 使用：jquery
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用jQuery</title>
<link rel="stylesheet" href="./css/app.css">
<script src="./jquery/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function () {
$.get("./Import.html", function(data,state,xhr) {
$(".import-box").innerHTML(data);
});
});
</script>
</head>
<body>
<div class="container">
<div class="menu">
<div class="import-box">
加载中......
</div>
</div>
<div class="context">
<span>主页内容区</span>
</div>
</div>
</body>
</html>
<!-- 优点：
1、兼容性最好，几乎能兼容所有浏览器(jquery有多个版本，老版能兼容到IE6,甚至IE5)
2、开发方便快捷
-->
<!-- 缺点：
1、需要引用jquery库，并且注意版本(版本问题比较小，主要是版本可能和功能版本有冲突)
-->
动态网页技术
比如 asp.net webform、mvc、razor、blazor等技术中，都有一个类似"模板页"的概述，可以很方便的实现。