在html頁面引入外部html的方法 (使用第三方外掛)

阿新 • • 發佈：2019-01-14

一般情況下，引入外部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之類的也沒必要，在這個大資料時代，簡直就是浪費伺服器資源

在html頁面引入外部html的方法 (使用第三方外掛)

一般情況下，引入外部html的方法無非就5種，分別是： 1、iframe <iframe src="test.html"></iframe> 2、link方式 <link rel="import" href

在html頁面引入外部html的方法 (使用第三方外掛)

一般情況下，引入外部html的方法無非就5種，分別是： 1、iframe <iframe src="test.html"></iframe> 2、link方式 <link rel="import" hre

gulp-html-import，在html中引入外部html檔案

寫於 2016.06.14 專案地址： gulp-html-import 曾經學習PHP的時候，深深覺得include語法非常好用，後接觸了ejs，發現裡面也有類似的語法，能夠方便地引入公共html檔案；在學習了vue，react等框架以後，“元件化思想”更是在我腦海根深蒂固，再也無

如何在HTML不同的頁面中，共用頭部與尾部？HTML的引入幾種方法

asp語言和PHP語言的使用首先製作一個頭部檔案head.asp，或者一個底部檔案foot.asp。如主頁是index.asp，呼叫頭部程式碼是在index.asp檔案程式碼的開始位置（第一個標記後面，<head>標記前面）增加如下程式碼： &

使用jquery的load方法載入html頁面，但是html引入的js不生效

Write By Monkeyfly 以下內容均為原創，如需轉載請註明出處。前提有一個公共的登入彈框頁面需要在多個頁面引用，百度後就使用了jQuery 的 load 方法。做法：將公共的 ht

html頁面引入公共靜態頁面

blog pos span strong tty 頁面 key ret size 1.h5新增的embed標簽： <embed type="text/html" src="header.html" />html頁面引入公共靜態頁面

如何在HTML頁面引入javaScript程式碼

javaScript指令碼程式碼可以通過以下3種方式嵌入到HTML文件： 1.使用<script>…</script>標籤對在頁面內引用使用<script>…</script>標籤對將javaScript程式碼嵌入到HTML

html檔案引入其它html檔案的方法：include方式

一個網站很多頁面裡面，一部分內容的程式碼是一樣的，比如：head，footer，menu等。那麼我們則可以寫一個頭部，一個尾部，一個menu然後引入到需要用的頁面裡面，則不需用寫重複的程式碼了。include是在a.html裡面嵌入b.html的程式碼，是將程式碼拼湊完整，而

html中引入外部檔案

在我們製作html頁面的時候常常需要引入一些外部檔案來使自己的工作更加高效，下面我就分享一下，在製作html是本人用到的一些外部檔案引用： 1.外部引入JavaScript檔案 <script type="text/javascript" src="../javascrip

eclipse導入maven時，html頁面引入js的路徑出現紅色波浪線

ali resource com ati nbsp valid bsp 引擎紅色用eclipse導入一個springboot項目時，html頁面引入js以及css時出現如下圖所示情況，html頁面用了 thymeleaf模板引擎。另外js文件與css文件路徑也是正確無誤

html頁面嵌入模板html模板

JSP頁面引入外部CSS檔案，重新整理後不起作用如何解決

一般CSS程式碼可以寫在專門的CSS檔案中，然後某個頁面需要時直接呼叫CSS檔案即可。但發現將CSS檔案引入後仍然不起作用。重新整理後無效果。其實只要在<link>標籤裡新增一個charset="utf-8"就可以了。就像下面這樣：<link rel="st

HTML 頁面載入 Flash 外掛的幾種方法

<span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;"> <object classid="clsid:d27cdb6e-ae6d-11cf-

HTML引入外部JS檔案的方法

在引入外部JS檔案的情況下，不能在<script></script>之間插入程式碼，插入的程式碼不執行，只執行引入的外部檔案。 attack.html 程式碼： <!D

一個頁面中引入另一個html頁面的方法

在實際專案中，有時候需要在一塊內容中引入另一個頁面的html.當然引入另一個頁面的html有幾種方法這裡介紹的是使用jquery,來達到首頁在需要引入的區域給個id例如<div id="demo1"></div> 然後接下來在 <scrip

HTML頁面跳轉的5種方法

text div oca 詳細頁面跳轉 com -- redirect 自動下面列了五個例子來詳細說明，這幾個例子的主要功能是：在5秒後，自動跳轉到同目錄下的hello.html（根據自己需要自行修改）文件。1) html的實現 ?123456<head>&

蘋果手機顯示分享鏈接的方法html頁面

round html ack 顯示 all ridge lis tlist 微信 function onBridgeReady(){ WeixinJSBridge.call(‘showOptionMenu‘); } if (typeof WeixinJSBrid

動態獲取html頁面的內容，而且取當中的某塊元素的方法

var mod .ajax pos spa app sync lte index ??$.ajax({ url: "http://192.168.1.59:8888/app-tpl-webapp/tpl/design.html", async:f

[轉]html頁面調用js文件裏的函數報錯onclick is not defined處理方法

board defined ror tag scrip boa spa 知識 -c 原文地址:http://blog.csdn.net/ywl570717586/article/details/53130863 今天處理html標簽裏的onclick功能的時候總是報錯：Un

html引入css的方法，以及css選擇器

html 中間 col css選擇器 sheet strong sna 方法權限 Html中引入css的四種方式 1、行內式 style=“XXX”寫在標簽中 <h1 style = "color: #000;"> 2、

在html頁面引入外部html的方法 (使用第三方外掛)

相關推薦