在html页面中引入另一个html页面的标签
1、用iframe标签
<iframe SRC="xxxx.html" ></iframe>
2、用object标签
<object data="xxxx.htm"></object>
3、behavior的download方式
例:
1.IFrame引入
[代码] <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME>
2.<object>方法
[代码] <object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>
3.Behavior的download方法
[代码]
<span id=showImport></span>
<IE:Download ID="oDownload" STYLE="behavior:url(#default#download)" /> <script>
function onDownloadDone(downDate){ showImport.innerHTML=downDate
}
oDownload.startDownload('import.htm',onDownloadDone) </script>
超文本标记语言, 标准通用标记语言下的一个应用。“ 超文本 ”就是指页面内可以包含图片、 链接,甚至音乐、 程序等非文字元素。超文本标记语言的结构包括 “头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的 具体内容。
<!--第一种:jquery获取dom内的id,直接加载想要引入的页面-->
<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>