Страницы AMP с пользовательским javascript

Я столкнулся с внедрением AMP на мобильной странице и мало проблем с использованием пользовательского javascript, загруженного через amp-iframe.Страницы AMP с пользовательским javascript

Вопрос заключается в том, что у меня есть мне нужно, чтобы открыть/закрыть меню на боковую панель, которые просто позвонить в яваскрипте функцию в теге:

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

Как спецификации AMP, OnClick не допускается, так что мои вопрос: как я могу вызвать функцию javascript?

Я загружаю только файл javascript с очень основными функциями. Нет внешних вызовов и т. Д.

источник

2017-02-01 Apalabrados

Кажется, вам нужно заменить Javascript меню на чистый CSS. В этой статье объясняется, как это сделать:

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>

источник

2017-02-01 08:17:22

был обычным JS. Он работает над css not js –

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

источник

2017-10-12 12:40:03

Страницы AMP с пользовательским javascript

ответ

Смежные вопросы