<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>
html中引入调用另一个html的方法，尝试了好几种，都列出来：
其中第一种是最好的，其他的方法，可以尝试看看，是不是适合你当前项目
一、div+$(“#page1”).load(“b.html”)
参考代码：
二、iframe
参考代码：
三、object引入
参考代码：
四、import引入
参考代码：
五、bootstrap的panel组件，或者easyui的window组件，有点类似这个效果；
HTML里用如何包含引用另一个html文件整理了3个方法，一个是HTML的iframe标签，别两个是JS引用。比如要在arr.html文件里引用index.html文件，方法如下。
1、HTML引用方法：
<iframe name="toppage" width=100% height=100% marginwidth=0 marginheight=0 frameborder="no" border="0" src="index.html" ></iframe>
2、JS引用方法：
<object style="border:0px" type="text/x-scriptlet" data="index.html" width=100% height=100%></object>
3、<script type="text/javascript" src="index.js"></script>
html 中include另外一个页面两个页面 technologies.html head.html 在 technologies.html 中使用 include
使用chrome 打开 technolliges.html，页面没有任何显示。原因 html不支持 include，解决方案参考：csdn: html中include方法 。参考方法将.html改成 .aspx，在technologies.aspx中打开可以显示 head.html中的内容。有一个未解决问题 windows 2000 IIS 中的 default.aspx 页面不支持默认主页面，支持default.html，暂时无法使用该方案，但可以尝试另外一个iframe方案，iframe方案支持在html页面中包含其它页面。
可以用iframe框架来解决
<iframe src="另一个网页的路径"></iframe>定义和用法
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
<html><body>
<iframe src="/i/test.html"></iframe>
<p>上面代码中的src为另一个网页</p>
</body>
</html>
效果如下
