AMP: amp-script ไม่ทำงาน
Aug 28 2020
ฉันกำลังพยายามใช้amp-scriptเพื่อสลับคลาสในnav(เมนูด้านบน) ของฉันเมื่อหน้าต่างเริ่มเลื่อน เอฟเฟกต์คือการเปลี่ยนการนำทางคงที่จากกึ่งโปร่งใสเป็นสีขาวทึบ
นี่คือสิ่งที่ฉันพยายาม ...
<!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>
และไซต์ทำงานได้ตามที่คาดไว้ ดังนั้นฉันรู้แน่นอนว่าจาวาสคริปต์ตามที่เขียนไว้นั้นทำในสิ่งที่ฉันต้องการให้ทำ ปัญหาทั้งหมดเกิดจากวิธีที่ AMP จัดการกับสคริปต์
คำตอบ
AlexandrKazakov Sep 02 2020 at 16:47
เห็นได้ชัดว่าคุณไม่เข้าใจว่า 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>