javascript - 单击链接时加载 HTMLImport (Polymer)

Answer 1

您可以将 HTML Imports 用于这样的事情，但它可能会使事情变得不必要地复杂化。您仍然需要编写一些 JS 来将导入中的内容添加到您的文档中。到那时，为什么不加载 iframe 甚至更好，创建一个合适的 AJAX 站点？

导入的真正好处是 HTML 解析器可以在加载应用程序的其余部分时处理导入。但是，如果您动态加载导入（而不是声明<link rel="import">），则不会发生这种情况。

这是您的方法的一个工作示例。它使用原生 Imports (

<a href="#" onclick="load('http://www.html5rocks.com/en/tutorials/')">load articles</a>

<output></output>

<script>  
  function load(url) {
    var link = document.createElement('link')
    link.rel = 'import';
    link.href = url;
    link.onload = function(e) {
      var articles = this.import.querySelectorAll('article.tutorial_listing');

      var frag = document.createDocumentFragment();
      [].forEach.call(articles, function(art, i) {
        frag.appendChild(art.querySelector('h3'));
      });

      var out = document.querySelector('output');
      out.innerHTML = '';
      out.appendChild(frag);
    };

    document.body.appendChild(link);
  }
</script>