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>

单击链接<a onclick="..."></a>时加载HTMLImport（Polymer）

1 个答案: