Question

我正在尝试将当前页面转换为amp页面，但是onclick属性遇到一些麻烦。无论如何，有没有在功放页面中添加该功能。这是我想转换的标签

<img src="theSrc"
     alt=""
     onclick="window.open('link', 'Popup','toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30')"
     style="cursor:pointer"
     id="someID"
/>

Answer 1

AMP允许在属性“ on”内定义与支持的事件相对应的各种操作（请参见AMP Actions and Events）。因此，您的代码应类似于：

<amp-img src=" "
     alt=""
     role=""
     tabindex=""
     on="tap: <your action here>"
     style=" "
     id=" "
>
<!-- 'role' and 'tabindex' attributes are mandatory when using 'on' attribute
      in some html elements like Bachcha Singh pointed out in the comments.
      Otherwise you will get AMP-validation errors  -->

请注意，在AMP中，我们需要使用<amp-img> </amp-img>标签而不是<img />标签。另外，我相信您不能使用window.open（），因为AMP中仅允许使用少数列出的白名单javascript函数，尽管您可以使用AMP逻辑来重新创建所需的功能。

Answer 2

您的代码似乎想要显示图像，链接和弹出窗口

<img src="theSrc"
     alt=""
     onclick="window.open('link', 'Popup','toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30')"
     style="cursor:pointer"
     id="someID"
/>

可以结合使用amp-img，amp-lightbox和amp-iframe

Here is the working Url

代码：

<!doctype html>
<html amp>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="popup.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
   <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
   <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
     <style amp-custom>
    .lightbox {
      background: rgba(0,0,0,0.8);
      width: 580px;
      height: 600px;
      margin:30px auto;
      padding:30px;
      position:relative;
    }
    .close { position:absolute; right:5px; top:5px; color: red;    font-family: arial;    font-size: 25px;} 

  </style>

 </head>
 <body>


  <amp-lightbox id="Popup" layout="nodisplay">
    <div class="lightbox" >
      <span class="close" on="tap:Popup.close" role="button" tabindex="0">X</span>
      <amp-iframe width="580" title="Animated dancing GIF from Giphy"
                          height="600"
                          layout="responsive"
                          sandbox="allow-scripts allow-same-origin allow-popups"
                          frameborder="0"
                          src="https://giphy.com/embed/DKG1OhBUmxL4Q">
    <amp-img layout="fill"
    src="https://i.vimeocdn.com/video/536538454_640.webp"
    placeholder></amp-img>
    </amp-iframe>
    </div>
  </amp-lightbox>
  <span class="ampstart-btn caps m2" on="tap:Popup" role="button" tabindex="0">
    <amp-img src="https://dummyimage.com/200x50/ff0000/ffffff&text=Click+Here+Image" width="200" height="50" layout="fixed"></amp-img>
  </span>


 </body>
</html>

如何在功放页面中使用onclick

2 个答案: