html代碼復(fù)用各種方法

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.在命令行工具里,執(zhí)行g(shù)ulp fileinclude。執(zhí)行完畢后,dist目錄里就有相對應(yīng)的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'}))//設(shè)置生成的文件后綴名為html

? ? ? ? .pipe(gulp.dest('Views/dist'));//gulp.dest中存放編譯后的文件的存放地址

});

3.通過<%-include ../template.html? %>引用template.html

4.在命令行工具里,執(zhí)行g(shù)ulp ejs。執(zhí)行完畢后,dist目錄里就有相對應(yīng)的html文件。

3.iframe

1.將項(xiàng)目放于本地服務(wù)器如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); //定時(shí)開始

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

? ? ?}

? ? ?// 停止定時(shí)

? ? ?window.clearInterval(timer1);

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 自適應(yīng)高度,其實(shí)就是設(shè)置iframe的高度,使其等于內(nèi)嵌網(wǎng)頁的高度,從而看不出來滾動(dòng)條和嵌套痕跡。對于用戶體驗(yàn)和網(wǎng)...
    布拉德皮蛋_qzy閱讀 3,477評論 0 3
  • Window和document對象的區(qū)別 window對象window對象表示瀏覽器中打開的窗口window對象是...
    FConfidence閱讀 2,368評論 0 5
  • 前言 本文默認(rèn)你已經(jīng)安裝好node環(huán)境,并且熟悉node命令,和window cd命令。 gulp簡介 基于nod...
    9I閱讀 2,044評論 4 50
  • 對網(wǎng)站資源進(jìn)行優(yōu)化,并使用不同瀏覽器測試并不是網(wǎng)站設(shè)計(jì)過程中最有意思的部分,但是這個(gè)過程中的很多重復(fù)的任務(wù)能夠使用...
    懵逼js閱讀 1,172評論 0 8
  • 不知不覺在書寫群呆了快一個(gè)月了,中間有過沖突,有過訴說,也有無盡的包容、接納和安撫,我們都是小心翼翼地活在當(dāng)下;活...
    疲憊的快樂閱讀 194評論 0 0

友情鏈接更多精彩內(nèi)容