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>
我正在尝试在 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>