把HTML模板做成单独的文件有利于复用和缓存,前面两篇文章就是在推荐这种做法的。但我们一直都通过传统的方式来实现,需要各种模拟。抛开这些问题去看的话,实际上在WebComponents草案里引入了rel="import"的LINK标签,它就是用于载入外部HTML资源的。
目前这个特性只有在Chrome中手动开启flag的情况下才能勉强支持
LINK[rel=import]其实有点类似于IFRAME,它引用的对象也是一个完整的文档,而不是文档片段,而且里面的SCRIPT也会执行,对跨域的资源访问同样有同源策略的限制。
console.log(tmp.import.body.innerHTML);
test
console.log("a.html");
但和IFRAME不同的是,它和父文档的关系更密切。它自身确实是一个文档,可以通过link元素上的import属性访问,但在其内部的代码中,如果访问document则等同于访问父文档。这是很奇怪的设定,虽然内部的元素与父文档不在一个DOM树上(父文档上querySelector无法找到内部的元素),但他们却共用一个document对象,甚至共用一个全局环境。这意味着STYLE或SCRIPT之类的标签所执行的结果会影响到容器。
这个文字是红色的
varg="global";
body {color:red;}
test
console.log(tmp.ownerDocument==document);//true
console.log(tmp.ownerDocument.defaultView==window);//true
console.log(document.querySelector("h1"));//null
console.log(g);//"global"
https://www.web-tinker.com/article/20637.html