在IE里面,不是问题,用jq.load就可以,在chrome内核,默认是禁止访问本地文件的,需要放在web server下才行.
那么不用webserver到底行不行呢?
搜索和尝试了不少方案,只有这个是靠谱的.
查了一下,这个是h5的新特性,不过对chorme不是问题(ff据说不支持)
页面1
<html>
<head>
<title>main</title>
</head>
<link rel="import" href="./tlink2.htm" id="p2">
<link rel="import" href="./tlink3.htm" id="p1">
<script>
//访问导入文档
//console.log(d1.id); //导入之前d1是没有的
console.log(p1.import.getElementById("d1").id);
console.log(p1.import.body.innerHTML);
document.write(p1.import.body.innerHTML);
console.log(d1.id); //导入以后,这么写就可以了
console.log(document.body.innerHTML);
</script>
</html>
页面2 可以用来加载html片段(静态模板)
<html>
<div>
123
</div>
</html>
页面3 可以用来加载js或者css
<html>
<head>
<title>p2</title>
</head>
<script>
//访问父文档
console.log(document.title);
//访问导入文档
document._currentScript = document._currentScript || document.currentScript;
var mainDoc = document._currentScript.ownerDocument;
console.log(mainDoc.title);
</script>
</html>