单击链接时加载HTMLImport（聚合物）

Question

我这么说，我具有基本的html和css技能，但不幸的是没有js ...

因此，我正在尝试创建一个index.php，当单击“链接”时应导入一些html内容。

对于我的每个页面，我都有相同的index.php，只有一部分不同。 那么，为什么不只是更改此部分，而不是加载其他完整的index.php ...

我为此使用了Polymer的HTMLImports。 我也尝试过jquery，但我什至没有走那么远...

这是我不工作的代码：

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,200italic,300italic,400italic" rel="stylesheet" type="text/css">
<link href="/favicon.ico" rel="shortcut icon">
<link href="/favicon.gif" rel="icon" type="image/gif">
<link href="/imports/index.php" rel="import">
<link href="/static/css/index.css" rel="stylesheet" type="text/css">
<script src="/static/js/polymer.min.js" type="text/javascript"></script>
<title>FOO</title>
</head>
<body>
<h1><a href="/">FOO</a></h1>
<div id="nav">
<span class="right">
<a class="nav" href="/" onclick="load('/imports/1.php')">1</a>
<a class="nav" href="/" onclick="load('/imports/2.php')">2</a>
<a class="nav" href="/" onclick="load('/imports/3.php')">3</a>
<a class="nav" href="/" onclick="load('/imports/4.php')">4</a>
<a class="nav" href="/" onclick="load('/imports/5.php')">5</a>
<a class="nav" href="/" onclick="load('/imports/6.php')">6</a>
<a class="nav" href="/" onclick="load('/imports/7.php')">7</a>
<a class="nav" href="/" onclick="load('/imports/8.php')">8</a>
<a class="nav" href="/" onclick="load('/imports/9.php')">9</a>
<a class="nav" href="/" onclick="load('/imports/contact.php')">// IMPRESSUM</a>
</span>
</div>
<hr>
<script type="text/javascript">
    window.addEventListener('HTMLImportsLoaded', function load(src, fn) {
        var link = document.createElement('link')
        link.setAttribute('rel', 'import')
        link.setAttribute('href', src)
        document.body.appendChild(link)
        HTMLImports.importer.load(document, function() {
            HTMLImports.parser.parseLink(link)
            fn(null, link.import.content)
        })
    });
</script>
</body>
</html>

这是来自1.php的内容示例：

<div id="gallery">
<div id="img">
<style scoped="scoped" type="text/css">
    div#img { width:1570px; }
</style>
<img class="gallery" src="/img/01.jpg" style="vertical-align:middle" alt="01.jpg">
<img class="gallery" src="/img/02.jpg" style="vertical-align:middle" alt="02.jpg">
</div>
</div>

在此先感谢您的帮助！

Answer 1

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

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

这是您的方法的一个有效示例。 它使用本地导入（

<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>

单击链接时加载HTMLImport（聚合物）

问题描述

1 个解决方案

解决方案1
1 2013-11-14 05:16:38

单击链接时加载HTMLImport（聚合物）

问题描述

1 个解决方案

解决方案1 1 2013-11-14 05:16:38

解决方案1
1 2013-11-14 05:16:38