Created
July 19, 2019 08:01
-
-
Save saikmadana/7cda9c1c0e24be906fb724e9be247d55 to your computer and use it in GitHub Desktop.
AMP: amp script usage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html amp lang="en-us"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> | |
| <link rel="canonical" href="canonical-url.com" /> | |
| <meta name="amp-experiments-opt-in" content="development"> | |
| <meta name="amp-experiment-token" | |
| content="AAAAAFl7Im9yaWdpbiI6Imh0dHBzOi8vZGVtby5kaXZhbWkuY29tIiwiZXhwZXJpbWVudCI6ImFtcC1zY3JpcHQiLCJleHBpcmF0aW9uIjoxNTY3Mjk2MDAwMDAwfUdy4F8vo9Pg5dCcn1yhx6Yw+1QvAMUsM8O0tfwsmJdqsNCs19vv2BF9wON39MKwQrJ7cSwIvcRVGt9ZRsDfUTYhG+A4mdsxCKYmganSWML/DOE+09PuQ07KkmvCwgTCR/vmpf/gl7VrNd5Y5uwQjshCerkdcp5xAe9ITfXAXIIa7k9A7v4PNXu06nnz78iaMngovlsZXS6ydDW+s6yoXYBwO5RdC6vKcyD62b8gjxyRH7djAjOW+RBY827JnL6l1cu/8lcMjUBBqfClGc0dgKGV1h8IGl9sjDRiWO2VViRGFs8FYPW5UC4H69gcon/jQY2peaWoTqUhmFjs4TGOb0A="> | |
| <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> <!-- cdn to amp --> | |
| <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script> <!-- cdn to amp-script --> | |
| </head> | |
| <body> | |
| <amp-script layout="container" src="https://url-to-deployed-js-file.js"> <!-- the js file should be in https --> | |
| <div class="amp-element"> <!-- click added for this element --> | |
| CLick me to test script working | |
| </div> | |
| </amp-script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var clickable = document.getElementsByClassName('amp-element')[0]; | |
| clickable.addEventListener('click', function() { | |
| console.log("click is working..."); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment