<div id="page"></div>
<script>
$("#page").load("header.html")
</script>
<!--第二种：引入include.js文件，然后用include标签加载想要的页面
代码如下-->
<script>
(function(window, document, undefined) {
var Include39485748323 = function() {}
Include39485748323.prototype = {
//倒序循环
forEach: function(array, callback) {
var size = array.length
for(var i = size - 1 i >= 0 i--){
callback.apply(array[i], [i])
}
},
getFilePath: function() {
var curWwwPath=window.document.location.href
var pathName=window.document.location.pathname
var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName))
var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1)
return localhostPaht+projectName
},
//获取文件内容
getFileContent: function(url) {
var ie = navigator.userAgent.indexOf('MSIE') > 0
var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest()
o.open('get', url, false)
o.send(null)
return o.responseText
},
parseNode: function(content) {
var objE = document.createElement("div")
objE.innerHTML = content
return objE.childNodes
},
executeScript: function(content) {
var mac = /<script>([\s\S]*?)<\/script>/g
var r = ""
while(r = mac.exec(content)) {
eval(r[1])
}
},
getHtml: function(content) {
var mac = /<script>([\s\S]*?)<\/script>/g
content.replace(mac, "")
return content
},
getPrevCount: function(src) {
var mac = /\.\.\//g
var count = 0
while(mac.exec(src)) {
count++
}
return count
},
getRequestUrl: function(filePath, src) {
if(/http:\/\//g.test(src)){ return src }
var prevCount = this.getPrevCount(src)
while(prevCount--) {
filePath = filePath.substring(0,filePath.substr(1).lastIndexOf('/')+1)
}
return filePath + "/"+src.replace(/\.\.\//g, "")
},
replaceIncludeElements: function() {
var $this = this
var filePath = $this.getFilePath()
var includeTals = document.getElementsByTagName("include")
this.forEach(includeTals, function() {
//拿到路径
var src = this.getAttribute("src")
//拿到文件内容
var content = $this.getFileContent($this.getRequestUrl(filePath, src))
//将文本转换成节点
var parent = this.parentNode
var includeNodes = $this.parseNode($this.getHtml(content))
var size = includeNodes.length
for(var i = 0 i < size i++) {
parent.insertBefore(includeNodes[0], this)
}
//执行文本中的额javascript
$this.executeScript(content)
parent.removeChild(this)
//替换元素 this.parentNode.replaceChild(includeNodes[1], this)
})
}
}
window.onload = function() {
new Include39485748323().replaceIncludeElements()
}
})(window, document)
</script>
<!--下面引入文件-->
<include src="header.html"></include>
<!--第三种： 用inframe框架加载页面， 兼容性不好-->
<iframe src="xxx.html"></iframe>
body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {margin: 0
padding: 0
}
* {
box-sizing: border-box
}
table{
border-collapse:collapse
}
body {
font-family: "Microsoft YaHei"
}
ul, li {
list-style: none
}
a {
text-decoration: none
color: #232323
}
input, textarea {
outline: none
box-shadow: none
}
textarea {
resize: none
overflow: auto
}
.clearfix {
zoom: 1
}
.clearfix:after {
content: "."
width: 0
height: 0
visibility: hidden
display: block
clear: both
}
.fl {
float: left }
.fr {
float: right }
.tl {
text-align: left
}
.tc {
text-align: center }
.tr {
text-align: right
}
.ellipse {
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
}
网站设计有很多时候在每一个网页都要使用同一的重复的部分，如每页的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>
