|
|
在 `html` 中引用 `html` 或 `html片断` 的方式
|
|
|
============================================
|
|
|
在静态站点的制作中，有些像通用菜单、头部、页脚等是统一的，如果在各页页中都复制一分对于修改是个空难级影响。
|
|
|
以下是几种在html中引用另一个 html 文件的方式。
|
|
|
|
|
|
本示例中被引用的html片断文件为 import.html；方便起见，引用和被引用的html文件牌同一目录(当然也可以不同)。
|
|
|
|
|
|
## 纯 `html` 方式
|
|
|
+ 使用：ifreame 标签
|
|
|
``` html
|
|
|
<!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 标签
|
|
|
``` html
|
|
|
<!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 标签<link rel="import" href="x.html" id="xx"/> [实现困难]
|
|
|
``` html
|
|
|
<!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 组件
|
|
|
``` html
|
|
|
<!-- 优点：与UI框架集成，方便实现多种效果 -->
|
|
|
<!-- 缺点：需要引用较重的UI框架，不如使用原生js或jQuery-->
|
|
|
````
|
|
|
## 使用 js 配合
|
|
|
+ 原生 js
|
|
|
``` html
|
|
|
<!-- 大体步骤：
|
|
|
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
|
|
|
``` html
|
|
|
<!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等技术中，都有一个类似"模板页"的概述，可以很方便的实现。
|