在html頁面引入外部html的方法 (使用第三方外掛)
阿新 • • 發佈：2018-11-28
一般情況下，引入外部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.org/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.org/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之類的也沒必要，在這個大資料時代，簡直就是浪費伺服器資源