在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;
    });

但现在，我发现了一种更方便的方式，就是使用第三方插件 AngularJS 来实现

首先引入 js 依赖

<script src="https://cdn.staticfile/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="https://cdn.staticfile/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之类的也没必要，在这个大数据时代，简直就是浪费服务器资源

更多推荐

在html页面引入外部html的方法 (使用第三方插件)