如何通过AMP-form组件实现AMP页面搜索请求重定向至非AMP页面？

当然可行！我之前刚好处理过类似的需求，用amp-form配合简单的配置就能实现这个功能。下面是具体的实现步骤和代码示例：

1. 先引入amp-form组件 #

AMP页面必须显式声明要使用的自定义组件，所以首先要在页面的<head>标签里添加amp-form的引入脚本：

<head>
  <!-- 保留你原有的AMP必需meta标签和基础脚本 -->
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>

2. 构建搜索表单 #

接下来在页面主体部分添加搜索表单，关键是要设置正确的action、method属性，以及输入框的name：

<form method="GET" action="https://www.example.com/search" target="_top">
  <input type="search" name="q" placeholder="输入搜索关键词" required>
  <button type="submit">搜索</button>
</form>

关键配置说明 #

• method="GET"：这个是核心，会把用户输入的内容以URL参数的形式附加到目标地址后面，正好匹配你需要的?q=<userquery>格式
• action="https://www.example.com/search"：替换成你实际的非AMP搜索页面地址
• target="_top"：确保跳转是在当前顶级窗口打开，避免在AMP的嵌套iframe中打开（如果你的AMP页面是被嵌入的话）
• name="q"：输入框的name属性要和搜索页面期望接收的参数名保持一致，这里设为q就会生成?q=用户输入内容的参数
• required：可选，用来强制用户输入内容后才能提交，符合AMP的表单验证规范

额外注意事项 #

• 确保你的AMP页面符合AMP官方的验证规则，可以用AMP验证工具检查是否有配置错误
• 如果需要添加搜索时的加载提示，amp-form也支持通过submitting状态来实现，不过如果只是单纯的跳转需求，这个不是必需的

这样设置之后，用户在AMP页面输入搜索词点击提交，就会直接跳转到你指定的非AMP搜索页面，并且自动携带上用户输入的查询参数啦。

内容的提问来源于stack exchange，提问作者Adam