|
|
在 `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>
|
|
|
<!-- 优点：兼容性好，方便快捷 -->
|
|
|
<!-- 缺点：浏览器当两个独立网页，样式和调试不太方便 -->
|
|
|
````
|
|
|
+ 使用：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>
|
|
|
<!-- 优点：兼容性好，方便使用-->
|
|
|
<!-- 缺点：样式不好调试、不是专用标签-->
|
|
|
````
|
|
|
+ 使用：link [重点推荐]
|
|
|
``` 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.htm" >
|
|
|
</iframe>
|
|
|
<div>
|
|
|
其它内容
|
|
|
</div>
|
|
|
</body>
|
|
|
</html>
|
|
|
<!-- 优点：
|
|
|
|
|
|
-->
|
|
|
<!-- 缺点：
|
|
|
|
|
|
-->
|
|
|
````
|
|
|
+ 使用：import 引入
|
|
|
|
|
|
``` 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>
|
|
|
<!-- 优点：
|
|
|
|
|
|
-->
|
|
|
<!-- 缺点：
|
|
|
|
|
|
-->
|
|
|
````
|
|
|
+ bootstrap 的 panel 组件，或者 easyui 的 window 组件
|
|
|
``` 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>
|
|
|
<!-- 优点：
|
|
|
|
|
|
-->
|
|
|
<!-- 缺点：
|
|
|
|
|
|
-->
|
|
|
````
|
|
|
## 使用 js 配合
|
|
|
+ 原生 js
|
|
|
``` html
|
|
|
<!-- 大体有以下几种方式
|
|
|
|
|
|
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
|
|
|
``` 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、兼容性最好，几乎能兼容所有浏览器(jquery有多个版本，老版能兼容到IE6,甚至IE5)
|
|
|
2、开发方便快捷
|
|
|
-->
|
|
|
|
|
|
<!-- 缺点：
|
|
|
1、需要引用jquery库，并且注意版本(版本问题比较小，主要是版本可能和功能版本有冲突)
|
|
|
-->
|
|
|
````
|
|
|
|
|
|
## 动态网页技术
|
|
|
比如 asp.net webform、mvc、razor、blazor等技术中，都有一个类似"模板页"的概述，可以很方便的实现。
|