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

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

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