Question

我正面临在移动网页中实施AMP，并且在通过 amp-iframe 调用自定义javascript时几乎没有问题。

问题是我需要打开/关闭侧栏菜单，它只是在标签中调用javascript函数：

<a href="#" onclick="w3_open()" class="my-menu">☰</a>

作为AMP规范，不允许 onclick ，所以我的问题是：如何调用javascript函数？

我只加载一个具有非常基本功能的javascript文件。没有外部呼叫等等。

Answer 1

似乎你必须用纯CSS替换Javascript菜单。本文介绍了如何执行此操作：

http://www.da-agency.de/accelerated-mobile-pages-build-mobile-navigation-amp-html/

为后人复制粘贴的完整示例：

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

Answer 2

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

而不是Javascript更好地使用AMP组件。

您将从以下链接获得更多详细信息。 https://ampbyexample.com/components/amp-sidebar/preview/

带有自定义javascript的AMP页面

2 个答案: