Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

rel="import" 未来的HTML模板引入方式

  把HTML模板做成单独的文件有利于复用和缓存,前面两篇文章就是在推荐这种做法的。但我们一直都通过传统的方式来实现,需要各种模拟。抛开这些问题去看的话,实际上在WebComponents草案里引入了rel="import"的LINK标签,它就是用于载入外部HTML资源的。
  目前这个特性只有在Chrome中手动开启flag的情况下才能勉强支持
  LINK[rel=import]其实有点类似于IFRAME,它引用的对象也是一个完整的文档,而不是文档片段,而且里面的SCRIPT也会执行,对跨域的资源访问同样有同源策略的限制。
<!--test.html-->
<link rel="import" href="a.html" id="tmp" />
<script>
console.log(tmp.import.body.innerHTML);
</script>
<!--a.html-->
<h1>test</h1>
<script>console.log("a.html");</script>

  但和IFRAME不同的是,它和父文档的关系更密切。它自身确实是一个文档,可以通过link元素上的import属性访问,但在其内部的代码中,如果访问document则等同于访问父文档。这是很奇怪的设定,虽然内部的元素与父文档不在一个DOM树上(父文档上querySelector无法找到内部的元素),但他们却共用一个document对象,甚至共用一个全局环境。这意味着STYLE或SCRIPT之类的标签所执行的结果会影响到容器。
<!--test.html-->
这个文字是红色的
<script>
var g="global";
</script>
<link rel="import" href="a.html" id="tmp" />
<!--a.html-->
<style>body {color:red;}</style>
<h1>test</h1>
<script>
console.log(tmp.ownerDocument==document); //true
console.log(tmp.ownerDocument.defaultView==window); //true
console.log(document.querySelector("h1")); //null
console.log(g); //"global"
</script>

  我觉得这个设计很蛋疼,既然共用执行环境,为什么还要用一个奇怪的文档把这些节点装起来呢?
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^