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.7 KiB
5.7 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>
<!-- 优点：兼容性好，方便快捷 -->
<!-- 缺点：浏览器当两个独立网页，样式和调试不太方便 -->
- 使用：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>
<!-- 优点：兼容性好，方便使用-->
<!-- 缺点：样式不好调试、不是专用标签-->
- 使用：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="/" />
</head>
<body>
<div>
其它内容
</div>
<!-- 使用iframe标签引用html文件 -->
<iframe
<!-- 各种属性 -->
name="content_frame"
width="100%"
height="30px"
marginwidth = 0
marginheight=0
src="import.htm" >
</iframe>
<div>
其它内容
</div>
</body>
</html>
<!-- 优点：
-->
<!-- 缺点：
-->
- 使用：import 引入
<!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
<!-- 各种属性 -->
name="content_frame"
width="100%"
height="30px"
marginwidth = 0
marginheight=0
src="import.htm" >
</iframe>
<div>
其它内容
</div>
</body>
</html>
<!-- 优点：
-->
<!-- 缺点：
-->
- bootstrap 的 panel 组件，或者 easyui 的 window 组件
<!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
<!-- 各种属性 -->
name="content_frame"
width="100%"
height="30px"
marginwidth = 0
marginheight=0
src="import.htm" >
</iframe>
<div>
其它内容
</div>
</body>
</html>
<!-- 优点：
-->
<!-- 缺点：
-->
使用 js 配合
- 原生 js
<!-- 大体有以下几种方式
1 使用 document.createElement() 方法创建一个指定的 HTML 元素，然后使用 appendChild() 方法将它添加到指定的父节点。
2 使用 innerHTML 属性直接向指定的元素插入 HTML 代码。
3 使用 insertAdjacentHTML() 方法在指定的位置插入 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
<!-- 各种属性 -->
name="content_frame"
width="100%"
height="30px"
marginwidth = 0
marginheight=0
src="import.htm" >
</iframe>
<div>
其它内容
</div>
</body>
</html>
<!-- 优点：
1、原生兼容性好
2、不需要引入第三方库
-->
<!-- 缺点：
1、需要一个唯一的父元素
2、代码开发没有使用框架方便
-->
- 使用：jquery
<!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
<!-- 各种属性 -->
name="content_frame"
width="100%"
height="30px"
marginwidth = 0
marginheight=0
src="import.htm" >
</iframe>
<div>
其它内容
</div>
</body>
</html>
<!-- 优点：
1、兼容性最好，几乎能兼容所有浏览器(jquery有多个版本，老版能兼容到IE6,甚至IE5)
2、开发方便快捷
-->
<!-- 缺点：
1、需要引用jquery库，并且注意版本(版本问题比较小，主要是版本可能和功能版本有冲突)
-->
动态网页技术
比如 asp.net webform、mvc、razor、blazor等技术中，都有一个类似"模板页"的概述，可以很方便的实现。