几种在html中引入其他文件的方法
做个人主页有时候会因为一些原因出现只能使用静态页面的情况,这时候想要在html中引入一些其他html文件,经过搜索学习发现有下面5种方法可以实现,有些需要特定环境才可以,有些比较通用,实现方法如下:
<ul>
<li>iframe</li>
<IFRAME SRC="iframe.html" frameborder="0" width="100%" height="40px"></IFRAME>
<li>object</li>
<object style="border:0px" type="text/x-scriptlet" data="object.html" width=100% height=40></object>
<li>Behavior_download(此方法只支持IE5-9浏览器,已过时)</li>
<span id=showImport></span>
<IE:Download ID="oDownload" STYLE="behavior:url(#default#download)" />
<script>
function onDownloadDone(downDate){
showImport.innerHTML=downDate;
}
oDownload.startDownload('Behavior_download.html',onDownloadDone);
</script>
<li>javascript_window.onload</li>
<span id=showInclude1></span>
<li>javascript_window.addEventListener_load(推荐使用此方法,演示代码未优化,只是展示实现方法)</li>
<span id=showInclude2></span>
<script>
var includeData = "read_file_var";
function readAjaxFile(url){
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState===4 && xhr.status===200){
includeData = xhr.responseText;
}
}
xhr.open("post",url,true);
xhr.send(null);
}
window.onload = function(){
readAjaxFile("jsreadfile1.html");
setTimeout(function(){showInclude1.innerHTML=includeData},300);
}
window.addEventListener("load",function(){
setTimeout(function(){readAjaxFile("jsreadfile2.html")},310);
setTimeout(function(){showInclude2.innerHTML=includeData},610);
});
</script>
</ul>