AMP: Amp-Skript wird nicht ausgeführt

Aug 28 2020

Ich versuche, amp-scripteine Klasse in meiner nav(oberen Menüleiste) umzuschalten, wenn das Fenster zu scrollen beginnt. Der Effekt besteht darin, das feste Navigationssystem von halbtransparent auf festes Weiß umzustellen.

Folgendes habe ich versucht ...

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>My AMP Page</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  <style amp-custom>
    nav {
      position: fixed;
      top: 0;
      width: 100vw;
      color: white;
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 10;
      text-align: center;
    }

    .opaque {
      background-color: white;
      color: black;
    }

    .hero {
      height: max(25vh, 250px);
      width: 100vw;
      background: red;
    }

    .spacer {
      height: 4em;
      background: blue;
      margin: 0.5em;
    }
  </style>
  <meta name="amp-script-src" content="sha384-bpf6fazoofAb6S1aK0_hOIa1g6nDaC_SPbTuSJsMxEzAPc11oKjAnJZmeFAMKc2p ">
</head>
<body>
  <script id="scroll-listener" type="text/plain" target="amp-script">
    document.addEventListener("scroll", myFunction);

    function myFunction() {
      console.log('scrolled!!');
      if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("topnav").className = "opaque";
      } else {
        document.getElementById("topnav").className = "";
      }
    }
  </script>
  <nav id="topnav">
    <h1>ACME Inc.</h1>
  </nav>
  <main>
    <header class="hero"></header>
    <article>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
    </article>
  </main>
</body>
</html>

Leider hat das Skript überhaupt keine Wirkung. Ich habe auch console.logAnweisungen platziert , um festzustellen, ob überhaupt Bildlaufereignisse gemeldet werden - und in der Konsole wird nichts angezeigt.

Irgendeine Idee, was ich hier falsch mache?

UPDATE: Um sicherzustellen, dass dies als "Nicht-AMP" -Seite funktioniert, habe ich die Zeile im obigen Beispiel geändert:

<script id="scroll-listener" type="text/plain" target="amp-script">...</script>

dazu ...

<script id="scroll-listener" type="text/javascript">...</script>

und die Seite funktioniert wie erwartet. Ich weiß also mit Sicherheit, dass das geschriebene Javascript genau das tut, was ich möchte. Das Problem liegt ausschließlich in der Art und Weise, wie AMP mit dem Skript umgeht.

Antworten

AlexandrKazakov Sep 02 2020 at 16:47

Anscheinend verstehen Sie nicht, wie Amp-Script funktioniert, was seltsam ist, da die offizielle Dokumentation Beispiele enthält.

Versuchen Sie dieses Beispiel:

<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>My AMP Page</title>
    <link rel="canonical" href="self.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <meta name="amp-script-src" content="sha384-nPCFvs2yYOVX1DFcHvkEUY1aC6PdG8FAgPUG16rZwxfQJOPh_pM1rA-oUzDsg8pk" />
    <style amp-custom>
      nav {
        position: fixed;
        top: 0;
        width: 100vw;
        color: white;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 10;
        text-align: center;
      }

      .opaque {
        background-color: white;
        color: black;
      }

      .hero {
        height: max(25vh, 250px);
        width: 100vw;
        background: red;
      }

      .spacer {
        height: 4em;
        background: blue;
        margin: 0.5em;
      }
    </style>
  </head>
  <body>
    <amp-script script="scroll-listener">
      <nav id="topnav">
        <h1>ACME Inc.</h1>
      </nav>
      <main id="main">
        <header class="hero"></header>
        <article>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
        </article>
      </main>
    </amp-script>

    <script id="scroll-listener" type="text/plain" target="amp-script">
      function myFunction(event) {
        console.log('scrolled!!');
      }
      window.addEventListener("scroll", myFunction);
    </script>
  </body>
</html>

Das obige Beispiel hilft Ihnen wahrscheinlich nicht dabei, das zu tun, was Sie wollen, aber zumindest werden Sie jetzt verstehen, wie Amp-Script funktioniert.

Amp-Script erfordert häufig das Auslösen eines benutzerdefinierten Ereignisses und funktioniert nicht sofort nach dem Laden der Seite. Lesen Sie hier darüber:https://amp.dev/documentation/components/amp-script/?format=websites#user-gestures