AMP:amp 脚本不是 运行

AMP: amp-script is not running

我正在尝试在 window 开始滚动时使用 amp-script 在我的 nav(顶部菜单栏)上切换 class。效果是将固定导航从半透明变为纯白色。

这是我试过的...

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

不幸的是,脚本根本没有效果。我还放置了 console.log 语句来查看我是否收到任何滚动事件报告 - 但控制台中没有显示任何内容。

知道我做错了什么吗?

更新:为了确保它作为“非 AMP”页面工作,我更改了上面示例中的行:

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

到这个...

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

网站按预期运行。所以我肯定知道所写的 javascript 做了我想要它做的事情。问题完全在于 AMP 处理脚本的方式。

显然,你不明白amp-script是如何工作的,这很奇怪,因为官方文档中有例子。

试试这个例子:

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

上面的例子可能不会帮助你做你想做的事,但至少现在你会明白 amp-script 是如何工作的。

amp-script 通常需要触发自定义事件,并且不会在页面加载后立即起作用。在这里阅读:https://amp.dev/documentation/components/amp-script/?format=websites#user-gestures

要完成此任务,我建议您使用 amp-position-observer 和 amp-animation 组件。这是一个例子:

<!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-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
    <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

    <style amp-custom>
      nav {
        position: fixed;
        top: 0;
        width: 100vw;
        color: cyan;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 10;
        text-align: center;
      }

      h1 {
        position: relative;
        z-index: 2;
      }

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

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

      .spacer {
        height: 4em;
        background: blue;
        margin: 0.5em;
      }

      .scroll-effect {
        background-color: #fff;
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }

      .top-anchor {
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="top-anchor">
      <amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay"></amp-position-observer>
    </div>
    <nav id="topnav">
      <span class="scroll-effect" id="scroll-effect"></span>
      <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-animation id="showAnim" layout="nodisplay">
      <script type="application/json">
        {
          "duration": "200ms",
          "fill": "both",
          "iterations": "1",
          "direction": "alternate",
          "animations": [
            {
              "selector": "#scroll-effect",
              "keyframes": [
                {
                  "opacity": "1",
                  "visibility": "visible"
                }
              ]
            }
          ]
        }
      </script>
    </amp-animation>
    <amp-animation id="hideAnim" layout="nodisplay">
      <script type="application/json">
        {
          "duration": "200ms",
          "fill": "both",
          "iterations": "1",
          "direction": "alternate",
          "animations": [
            {
              "selector": "#scroll-effect",
              "keyframes": [{ "opacity": "0", "visibility": "hidden" }]
            }
          ]
        }
      </script>
    </amp-animation>
  </body>
</html>