AMP pages with custom javascript
Question
I'm facing to implementing AMP within a mobile page and have little issues invoking custom javascript loaded via amp-iframe .
The question is that I have I need to open/close a sidebar menu which just call a javascript function in an a tag:
<a href="#" onclick="w3_open()" class="my-menu">☰</a>
As AMP specification, onclick is not allowed, so my question is: How can I call a javascript function?
I only load a javascript file with very basic functions. No external calls and so on.
2 answers
solution1
2 ACCPTED 2017-02-01 08:17:22
It seems you'll have to replace the Javascript menu with a pure CSS one. This article explains how to do it:
http://www.da-agency.de/accelerated-mobile-pages-build-mobile-navigation-amp-html/
Complete example copy-pasted here for posterity:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>AMPHTML mobile navigation demo</title>
<link rel="canonical" href="http://www.da-agency.de/wp/wp-content/uploads/ampdemo/amphtml-mobile-navigation-demo.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "AMPHTML mobile navigation demo",
"datePublished": "2016-03-09T10:00:00Z",
"image": [
"logo.jpg"
]
}
</script>
<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>
<style amp-custom>
div.test{
width:100px;
height:100px;
background-color: red;
}
div.logo{
float:left;
display:block;
}
div.toggle{
float:right;
display:block;
}
div.nav{
top: 0px;
width: 100%;
position: relative;
}
div.hamburger{
text-align: right;
}
div.nav,
div.main-navigation,
div.main-navigation ul,
div.main-navigation li,
div.main-navigation a {
text-decoration: none;
list-style: none outside none;
display: block;
line-height: 22px;
font-size: 15px;
font-family: Arial,Helvetica;
color: #777;
}
div.nav ul.sub-ul{
display:none;
}
div.nav ul.main-ul > li:hover > ul.sub-ul {
display:block;
}
div.main-navigation {
display:none;
}
div.nav:hover > div.main-navigation {
display:block;
}
body{
background-color: #eee;
}
div.page{
width: 100%;
height: 100vw;
max-width: 320px;
background-color: #fff;
margin-left: auto;
margin-right: auto;
padding: 10px 20px;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<div class="page">
<div class="header">
<div class="logo">
<amp-img src="logo.png" width="190px" height="51px" />
</div>
<div class="nav">
<div class="hamburger">
<a href="#" class="toggle-button"><!--SHOW MENU--><amp-img src="hamburger.png" width="45px" height="40px" /></a>
</div>
<div class="main-navigation">
<ul class="main-ul">
<li class="main-li">
<a href="/some/link/url/">some link text</a>
<ul class="sub-ul">
<li><a href="/some/link/url/1.1/">some link text 1.1</a></li>
<li><a href="/some/link/url/1.2/">some link text 1.2</a></li>
<li><a href="/some/link/url/1.3/">some link text 1.3</a></li>
</ul>
</li>
<li class="main-li">
<a href="/some/link/url/2/">some link text 2</a>
<ul class="sub-ul">
<li><a href="/some/link/url/2.1/">some link text 2.1</a></li>
<li><a href="/some/link/url/2.2/">some link text 2.2</a></li>
<li><a href="/some/link/url/2.3/">some link text 2.3</a></li>
</ul>
</li>
<li class="main-li">
<a href="/some/link/url/3/">some link text 3</a>
<ul class="sub-ul">
<li><a href="/some/link/url/3.1/">some link text 3.1</a></li>
<li><a href="/some/link/url/3.2/">some link text 3.2</a></li>
<li><a href="/some/link/url/3.3/">some link text 3.3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<h1>AMPHTML mobile navigation demo</h1>
<p>See a fully functional dropdown mobile navigation in action, that comes with absolutly no JavaScript / jQuery and is fully built on CSS and 100% AMP HTML compliant and AMP validating</p>
</div>
</div>
</body>
</html>
solution2
0 2017-10-12 12:40:03
<a id="sample-menu" on="tap:drawermenu.toggle">☰</a>
<amp-sidebar id="drawermenu" layout="nodisplay">
<a href="/">Item 1</a>
<a href="/">Item 2</a>
</amp-sidebar>
Instead of Javascript its better to use AMP components.
You will get more detail form the below link. https://ampbyexample.com/components/amp-sidebar/preview/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Add Javascript in AMP Pages
Google AMP and custom Javascript
What is the correct way to use custom vanilla javascript with in a AMP (ACCELERATED MOBILE PAGES) wesbite
Calling tracking JavaScript from AMP pages
Best way to include custom JavaScript in AMP
How to add custom JavaScript to AMP HTML
Adding Jquery To AMP Pages
JavaScript redirect - replacing `&` with `&amp`
How to add custom javascript or external js in AMP page?
How to use amp-bind for amp pages
Related Tags