我可以在amp-script中使用url搜索参数吗？

在AMP（Accelerated Mobile Pages）中，<amp-script> 元素允许你嵌入自定义的JavaScript代码，但有一些限制以确保页面性能和安全。关于在<amp-script>中使用URL搜索参数，以下是一些基础概念和相关信息：

基础概念

URL搜索参数：URL中?后面的部分，用于传递额外的信息。例如，在URL https://example.com/?param1=value1&param2=value2 中，param1=value1 和 param2=value2 就是搜索参数。
AMP脚本：<amp-script> 是AMP中用于嵌入自定义JavaScript代码的元素，但它有一些限制，比如不能访问DOM，不能使用某些浏览器API等。

类型

内联脚本：直接在<amp-script>标签内编写JavaScript代码。
外部脚本：通过src属性引用外部的JavaScript文件。

应用场景

复杂计算：当页面需要进行一些复杂的计算时，可以使用<amp-script>。
数据处理：处理从URL搜索参数中获取的数据。

问题与解决方法

问题：如何在`<amp-script>`中使用URL搜索参数？

原因

<amp-script>本身不能直接访问DOM，因此不能直接获取URL搜索参数。

解决方法

可以通过在HTML中定义一个全局变量来传递URL搜索参数，然后在<amp-script>中使用这个变量。

示例代码

<!DOCTYPE html>
<html amp lang="en">
<head>
  <meta charset="utf-8">
  <title>AMP Script Example</title>
  <link rel="canonical" href="https://example.com/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "name": "AMP Script Example"
    }
  </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>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
  <amp-script width="300" height="100" layout="fixed">
    <script type="text/javascript">
      // 获取全局变量
      const params = windowSearchParams;
      console.log(params);
    </script>
  </amp-script>

  <script type="application/json" id="windowSearchParams">
    {
      "param1": "value1",
      "param2": "value2"
    }
  </script>
</body>
</html>

解释

全局变量：在HTML中定义一个<script type="application/json" id="windowSearchParams">，将URL搜索参数作为JSON对象存储在这个脚本中。
访问全局变量：在<amp-script>中通过windowSearchParams变量访问这些参数。