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