在網上看了有如下的解決方案： ( 推薦學習：html教程 )
方案一：將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.js
4、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 --><h1>I am the header</h1>
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> <h1>I am the header</h1> <p>Hello World</p> <h1>I am the footer</h1></body></html>
以上就是在HTML頁面中引入外部HTML文件的解決方案的詳細內容，更多請關注 其它相關文章！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
新聞熱點
疑難解答
