HTML Import

基本操作

长久以来，网页可以加载外部的样式表、脚本、图片、多媒体，却无法方便地加载其他网页，iframe和ajax都只能提供部分的解决方案，且有很大的局限。HTML Import就是为了解决加载外部网页这个问题，而提出来的。

下面代码用于测试当前浏览器是否支持HTML Import。

  2. function supportsImports() {
  3.   return 'import' in document.createElement('link');
  4. }
  6. if (supportsImports()) {
  7.   // 支持
  8. } else {
  9.   // 不支持
  10. }

HTML Import用于将外部的HTML文档加载进当前文档。我们可以将组件的HTML、CSS、JavaScript封装在一个文件里，然后使用下面的代码插入需要使用该组件的网页。

  2. <link rel="import" href="dialog.html">

上面代码在网页中插入一个对话框组件，该组建封装在dialog.html文件。注意，dialog.html文件中的样式和JavaScript脚本，都对所插入的整个网页有效。

假定A网页通过HTML Import加载了B网页，即B是一个组件，那么B网页的样式表和脚本，对A网页也有效（准确得说，只有style标签中的样式对A网页有效，link标签加载的样式表对A网页无效）。所以可以把多个样式表和脚本，都放在B网页中，都从那里加载。这对大型的框架，是很方便的加载方法。

如果B与A不在同一个域，那么A所在的域必须打开CORS。

  2. <!-- example.com必须打开CORS -->
  3. <link rel="import" href="http://example.com/elements.html">

除了用link标签，也可以用JavaScript调用link元素，完成HTML Import。

  2. var link = document.createElement('link');
  3. link.rel = 'import';
  4. link.href = 'file.html'
  5. link.onload = function(e) {...};
  6. link.onerror = function(e) {...};
  7. document.head.appendChild(link);

HTML Import加载成功时，会在link元素上触发load事件，加载失败时（比如404错误）会触发error事件，可以对这两个事件指定回调函数。

  2. <script async>
  3.   function handleLoad(e) {
  4.     console.log('Loaded import: ' + e.target.href);
  5.   }
  6.   function handleError(e) {
  7.     console.log('Error loading import: ' + e.target.href);
  8.   }
  9. </script>
  11. <link rel="import" href="file.html"
  12.       onload="handleLoad(event)" onerror="handleError(event)">

上面代码中，handleLoad和handleError函数的定义，必须在link元素的前面。因为浏览器元素遇到link元素时，立刻解析并加载外部网页（同步操作），如果这时没有对这两个函数定义，就会报错。

HTML Import是同步加载，会阻塞当前网页的渲染，这主要是为了样式表的考虑，因为外部网页的样式表对当前网页也有效。如果想避免这一点，可以为link元素加上async属性。当然，这也意味着，如果外部网页定义了组件，就不能立即使用了，必须等HTML Import完成，才能使用。

  2. <link rel="import" href="/path/to/import_that_takes_5secs.html" async>

但是，HTML Import不会阻塞当前网页的解析和脚本执行（即阻塞渲染）。这意味着在加载的同时，主页面的脚本会继续执行。

最后，HTML Import支持多重加载，即被加载的网页同时又加载其他网页。如果这些网页都重复加载同一个外部脚本，浏览器只会抓取并执行一次该脚本。比如，A网页加载了B网页，它们各自都需要加载jQuery，浏览器只会加载一次jQuery。

脚本的执行

外部网页的内容，并不会自动显示在当前网页中，它只是储存在浏览器中，等到被调用的时候才加载进入当前网页。为了加载网页网页，必须用DOM操作获取加载的内容。具体来说，就是使用link元素的import属性，来获取加载的内容。这一点与iframe完全不同。

  2. var content = document.querySelector('link[rel="import"]').import;

发生以下情况时，link.import属性为null。

  • 浏览器不支持HTML Import
  • link元素没有声明rel="import"
  • link元素没有被加入DOM
  • link元素已经从DOM中移除
  • 对方域名没有打开CORS

下面代码用于从加载的外部网页选取id为template的元素，然后将其克隆后加入当前网页的DOM。

  2. var el = linkElement.import.querySelector('#template');
  4. document.body.appendChild(el.cloneNode(true));

当前网页可以获取外部网页，反过来也一样，外部网页中的脚本，不仅可以获取本身的DOM，还可以获取link元素所在的当前网页的DOM。

  2. // 以下代码位于被加载（import）的外部网页
  4. // importDoc指向被加载的DOM
  5. var importDoc = document.currentScript.ownerDocument;
  7. // mainDoc指向主文档的DOM
  8. var mainDoc = document;
  10. // 将子页面的样式表添加主文档
  11. var styles = importDoc.querySelector('link[rel="stylesheet"]');
  12. mainDoc.head.appendChild(styles.cloneNode(true));

上面代码将所加载的外部网页的样式表，添加进当前网页。

被加载的外部网页的脚本是直接在当前网页的上下文执行，因为它的window.document指的是当前网页的document，而且它定义的函数可以被当前网页的脚本直接引用。

Web Component的封装

对于Web Component来说，HTML Import的一个重要应用是在所加载的网页中，自动登记Custom Element。

  2. <script>
  3.   // 定义并登记<say-hi>
  4.   var proto = Object.create(HTMLElement.prototype);
  6.   proto.createdCallback = function() {
  7.     this.innerHTML = 'Hello, <b>' +
  8.                      (this.getAttribute('name') || '?') + '</b>';
  9.   };
  11.   document.registerElement('say-hi', {prototype: proto});
  12. </script>
  14. <template id="t">
  15.   <style>
  16.     ::content > * {
  17.       color: red;
  18.     }
  19.   </style>
  20.   <span>I'm a shadow-element using Shadow DOM!</span>
  21.   <content></content>
  22. </template>
  24. <script>
  25.   (function() {
  26.     var importDoc = document.currentScript.ownerDocument; //指向被加载的网页
  28.     // 定义并登记<shadow-element>
  29.     var proto2 = Object.create(HTMLElement.prototype);
  31.     proto2.createdCallback = function() {
  32.       var template = importDoc.querySelector('#t');
  33.       var clone = document.importNode(template.content, true);
  34.       var root = this.createShadowRoot();
  35.       root.appendChild(clone);
  36.     };
  38.     document.registerElement('shadow-element', {prototype: proto2});
  39.   })();
  40. </script>

上面代码定义并登记了两个元素：\和\。在主页面使用这两个元素，非常简单。

  2. <head>
  3.   <link rel="import" href="elements.html">
  4. </head>
  5. <body>
  6.   <say-hi name="Eric"></say-hi>
  7.   <shadow-element>
  8.     <div>( I'm in the light dom )</div>
  9.   </shadow-element>
  10. </body>

不难想到，这意味着HTML Import使得Web Component变得可分享了，其他人只要拷贝elements.html，就可以在自己的页面中使用了。