html代码复用各种方法

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);

}