HTML Imports新特性的使用demo。
HTML Imports新特性的使用demo――工具/原料chromeapache/nginx/tomcatHTML Imports新特性的使用demo――方法/步骤
HTML Imports新特性的使用demo 1、
HTML Imports能实现什么功能?
就是在html文件中,引入另一个html文件。
如果你熟悉php的话,就知道require、include能引入别的文件。
jsp也是有类似的导入其他文件的功能。
HTML Imports用于模板功能,还是比较方便的。
HTML Imports新特性的使用demo 2、
比较简单直接上代码,
准备两个文件:
HTML Imports新特性的使用demo 3、
部署到http服务器上,浏览器访问,就可以看到效果了。如图:
HTML Imports新特性的使用demo 4、
另外附上完整的代码:
【1.html】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<!-- HTML Imports -->
<link href="2.html" rel="import" />
</head>
<body>
<div id="container">
</div>
<div id="container2">
</div>
<script>
// 在javascript中调用HTML Imports的内容:
var post = document.querySelector('link[rel="import"]').import;
console.log(post.body.innerHTML) //能输出对应的html
document.querySelector('#container').appendChild(post.querySelector('.header'));
// document.querySelector('#container2').innerHTML=post.body.innerHTML;
// console.log(post)
console.log(post.body.innerHTML) //不能输出对应的html了,仅仅输出一部分
//HTML Imports 貌似有这样的特性:如果你已经把对应的html拼接到别的节点了,那个这个对象上就会删除已经被使用的节点
</script>
<p>
chrome 版本39.0.2171.95 m测试发现,他已经支持HTML Imports 特性了。(2014-12-29)
<br> HTML Imports 的演示demo不要在本地文件系统直接用浏览器打开,请部署到http服务器再用浏览器访问(比如nginx、apache等)。
<br> 本地访问,chrome会报错,因为这样import,chrome认为你跨域了。
<br> chrome报错信息为:
<br> Imported resource from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'null' is therefore not allowed access.
</p>
</body>
</html>
【2.html】
<div class="header">
<ul style="list-style=none;">
<li ><a href="###">导航1</a></li>
<li ><a href="###">导航2</a></li>
<li ><a href="###">导航3</a></li>
</ul>
</div>
<div class="test">
</div>