1.gulp-file-include(工具)
使用步驟:1.安裝gulp以及gulp-file-include(NodeJs上)
2.新建gulpfile.js,配置 gulp-file-include:
var gulp =require('gulp');//引入gulp
var fileinclude? =require('gulp-file-include');//引入gulp-file-include
gulp.task('fileinclude', function() {
? ? gulp.src('src/**.html')?.pipe(fileinclude({//gulp.src中存放要編譯的文件
? ? ? ? ? ?prefix:'@@',
? ? ? ? ? ?basepath:'@file'
? ? })).pipe(gulp.dest('dist'));//gulp.dest中存放編譯后的文件的存放地址
});
3.通過@@include('include/header.html')引用header.html
4.在命令行工具里,執行gulp fileinclude。執行完畢后,dist目錄里就有相對應的html文件。
2.gulp-ejs(模板)
使用步驟:1.安裝gulp-ejs(NodeJs上)
2.新建gulpfile.js,配置 gulp-file-include:
var gulp = require('gulp');//引入gulp
var ejs? = require('gulp-ejs');//引入gulp-ejs
gulp.task('ejs', function() {
? ? ?gulp.src('Views/Business/financeManage1.ejs')//gulp.src中存放要編譯的文件
? ? ? ? ?.pipe(ejs({},{ext: '.html'}))//設置生成的文件后綴名為html
? ? ? ? .pipe(gulp.dest('Views/dist'));//gulp.dest中存放編譯后的文件的存放地址
});
3.通過<%-include ../template.html? %>引用template.html
4.在命令行工具里,執行gulp ejs。執行完畢后,dist目錄里就有相對應的html文件。
3.iframe
1.將項目放于本地服務器如xampp下
2.<iframe src="../template.html" width="100%" onload="reinitIframeEND()"></iframe>
3.function reinitIframe(){
? ? ? ? var iframe = document.getElementById("iframepage");
? ? ? ? console.log(iframe);
? ? ? ? try{
? ? ? ? ? ? var bHeight = iframe.contentWindow.document.body.scrollHeight;
? ? ? ? ? ? var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
? ? ? ? ? ? var height = Math.max(bHeight, dHeight);
? ? ? ? ? ? iframe.height = height;
? ? ? ? }catch (ex){
? ? ? ? ? ? console.log(ex);
? ? ? ? }
}
var timer1 = window.setInterval("reinitIframe()", 500); //定時開始
function reinitIframeEND(){
? ? ? ? var iframe = document.getElementById("iframepage");
? ? ? ? console.log("3");
? ? ? ? try{
? ? ? ? ? ? var bHeight = iframe.contentWindow.document.body.scrollHeight;
? ? ? ? ? ? var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
? ? ? ? ? ? var height = Math.max(bHeight, dHeight);
? ? ? ? ? ? console.log(bHeight+":"+dHeight);
? ? ? ? ? ? iframe.height = height;
? ? ? }catch (ex){
? ? ? ? ? ? console.log(ex);
? ? ?}
? ? ?// 停止定時
? ? ?window.clearInterval(timer1);
}