Question

我在功放页面上有一个dropdown，当您单击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>

Answer 1

在您发表评论后，我进行了更多研究，发现：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/examples/standard-actions.amp.html

AMP下拉错误：“选择”标签中可能未出现“ onchange”

1 个答案: