时间戳

首页 > 解决方案 > AMP 下拉错误：“onchange”可能不会出现在标签“选择”中

javascript - AMP 下拉错误：“onchange”可能不会出现在标签“选择”中

问题描述

我dropdown在 amp 页面上有一个，当您单击 时option，它会引导您进入一个新页面。AMP 不允许使用onchange并抛出以下错误：The attribute 'onchange' may not appear in tag 'select'. 我发现了一个类似的问题，但通过在页面或外部 js 文件上添加自定义脚本，接受的答案并不理想（并且不应该工作）。只要我能获得 AMP 验证成功印章，我愿意尝试不同的方法。谢谢！

<!doctype html>
<html ⚡ lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="canonical" href="/article.html">
  <link rel="amphtml" href="/article.amp.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="shortcut icon" href="amp_favicon.png">
  <style amp-custom>
    body {
      width: auto;
      margin: 0;
      padding: 0;
    }
  </style>
  <script async src="https://cdn.ampproject.org/v0.js"></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>
  </head>
  <body>
      <select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);" aria-labelledby="dropdownMenu1">  							
        <option value="">Select an Option <i class="fa fa-caret-down"></i></option>
        <option value="/option1">Option 1</option>
        <option value="/option2">Option 2</option>
        <option value="/option3">Option 3</option>  					
     </select>
  </body>
</html>

标签： javascripthtml.net-coreamp-html

解决方案

在您发表评论后，我进行了更多研究，发现：https ://www.ampproject.org/docs/interaction_dynamic/amp-actions-and-events

看起来您可以通过以下方式完全按照您的意愿行事：

<select on="change:AMP.navigateTo(url=event.value)">
  <option value="http://google.com">google.com</option>
  <option value="http://yahoo.com">yahoo.com</option>
  <option value="http://bing.com">bing.com</option>
</select>

显然，适当地更新值！

如果您想了解更多信息，相关功能请求在这里：https ://github.com/ampproject/amphtml/issues/8976和链接示例在这里：https ://github.com/ampproject/amphtml/blob/master/示例/标准操作.amp.html

推荐阅读