在单击链接时加载 HTMLImport (Polymer） <a onclick=“..">.

Load a HTMLImport (Polymer) when clicking a link <a onclick="...">

本文关键字：onclick quot 链接 单击 加载 HTMLImport Polymer      更新时间：2023-09-26

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

因此，我正在尝试创建一个索引.php该索引在单击"链接"时应该导入一些html内容。

对于我的每个页面，我都有相同的索引.php，只有一个部分是不同的。那么为什么不直接更改这部分，而不是加载不同的完整索引.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>

提前感谢您的帮助！

您可以使用HTML导入来做这样的事情，但它可能会不必要地使事情复杂化。您仍然需要编写一些 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>
相关文章：