在html页⾯引⼊外部html的⽅法（使⽤第三⽅插件）  ⼀般情况下，引⼊外部html的⽅法⽆⾮就5种，分别是：
1、iframe
<iframe src="test.html"></iframe>
2、link⽅式
<link rel="import" href="test.html">
3、异步请求
$.get('test.html',function(html){  });
4、js⽅式
$("body").load("index.html");
5、vue 的 v-html 属性配合ajax异步请求
#html部分：
<div v-html="head"></div>
#js部分
var app = new Vue({
el: '#body',
data: {
message: ['Hello Vue!','123','456'],
head: ""
}
});
$.get('test.html',function(html){
app.head = html;
html href属性});
但现在，我发现了⼀种更⽅便的⽅式，就是使⽤第三⽅插件 AngularJS 来实现
⾸先引⼊ js 依赖
<script src="/angular.js/1.4.6/angular.min.js"></script>
然后body样写就ok啦
<body id="app" ng-app="">
<!-- 注意，⼀定要双引号在包含单引号 -->
<div ng-include="'head.html'"></div>
</body>
最后我们写个案例来测试下，新建head.html ⽂件
<div>
这是头部
</div>
然后新建index.html ⽂件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/angular.js/1.4.6/angular.min.js"></script>
</head>
<body id="app" ng-app="">
<div>主html内容</div>
<div ng-include="'./head.html'"></div>
</body>
</html>
浏览器访问index.html页⾯，内容如下图
这是⽬前我发现最简便的⽅法，当然也许有些⼈会说你咋不⽤jsp或着frame之类的模版引擎呢？
现在⼤部分⽹站都流⾏前后端分离了，要淘汰模版引擎只是时间问题，⽽且现在nodejs已经完全可以实现前端渲染页⾯在统⼀显⽰在页⾯上了，在弄jsp之类的也没必要，在这个⼤数据时代，简直就是浪费服务器资源

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。