html代码复用各种方法

使用步骤：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文件。

使用步骤：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文件。

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)

}

网站设计有很多时候在每一个网页都要使用同一的重复的部分，如每页的LOGO、导航栏设计、 版权信息等等，如果设计的时候没有将这些始终重复的部分独立出来，有需要修改的时候就会修改所有页面的同一个地方，将是非常繁琐的事情。所以我们往往将在 每个页面重复的部分独立设计、保存，采用调用的方法应用在每个页面相应的地方，如果有需要修改，往往只修改独立的这个文件就达到修改全部页面的效果。

在asp 以及php等中可以使用include之类的代码调用，那么在HTML格式的静态页面中是否也可以使用同样的调用方法？

现在就告诉大家在html网页中也可以实用文件调用的超级简短代码：

ASP一般常用调用代码：<!--webbot bot="Include" U-Include="include/top.htm" TAG="BODY" -->

标准ASP的SSI语法：<!--#include file="include/top.htm"-->

html调用中的浮动框架代码：<iframe src="地址" scrolling=auto width= height= frameborder=0 id=""></ifram>

html调用中的对象代码：<object src="地址" width="" height=""></object>

在html文件引入其它html文件的几种方法：

1.IFrame引入

代码： <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME>

你 会看到一个外部引入的文件，但会发现有一个类似外框的东西将其包围，可使用代码： <iframe name="content_frame" marginwidth=0 marginheight=0 width=100% height=30 src="import.htm" frameborder=0></iframe>但你又发现两个页面背景色不同，你只要在引入的文件import.htm中使用相同的背景色就可以了。

2.<object>方法

代码：<object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>

---