溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何在HTML頁面中引入外部HTML文件？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
在普通的靜態html開發過程中，沒必要用框架，只想用最基本的方式寫幾個靜態頁面出來，但是HTML中沒有include語法，每個頁面的公共部分都要手動復制粘貼一次，實在不科學
在網上看了有如下的解決方案：
方案一：將html文件轉為js文件，然后在頁面加載的時候將其加載進來執行渲染
方案二：使用iframe標簽進行引用
方案三：使用gulp插件gulp-html-import
本人推薦使用第三種方案，使用起來也很方便，下面介紹使用步驟：
1、npm install gulp -D
2、npm install gulp-html-import -D
3、目錄結構：
|
-- html-import
| |
| -- components
| | |
| | -- header.html
| | |
| | -- footer.html
| |
| -- index.html
| -- gulpfile.js4、gulpfile.js
var gulp = require('gulp');
var htmlImport = require('gulp-html-import');
gulp.task('import', function () {
gulp.src('./*.html')
.pipe(htmlImport('./components/'))
.pipe(gulp.dest('dist'));
})5、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gulp-html-import Example</title>
</head>
<body>
@import "header.html"
<p>Hello World</p>
@import "footer.html"
</body>
</html>
# 使用標簽@import "XXX.html"引入公共頁面6、header.html
<!-- header.html --> <h2>I am the header</h2>
8、gulp import 運行gulp將頁面進行合并最終會生成dist目錄
9、/dist/index.html
<!-- /dist/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gulp-html-import Example</title>
</head>
<body>
<h2>I am the header</h2>
<p>Hello World</p>
<h2>I am the footer</h2>
</body>
</html>看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
