放大器中不允许使用自定义JavaScript

Question

不允许自己获取自定义JavaScript

Answer 1

是的，AMP中不允许使用自定义Javascript，您可以使用amp-bind

一个简单的例子：

<p [text]="'Hello ' + foo">Hello World</p>

<button on="tap:AMP.setState({foo: 'amp-bind'})">Say "Hello amp-bind"</button>

别忘了在标头中添加必需的脚本：

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

Answer 2

如果您正在使用Wordpress并遇到此问题，

Google搜索控制台在我的一些Wordpress博客页面上引发了错误。 Google无法为我的Blog索引我的AMP页面。错误是某些自定义JavaScript和CSS已注入AMP页面。经过调查，我发现W3 Total缓存正在将缩小的JS（JavaScript）和CSS（级联样式表）链接注入页面。

搜索控制台中显示错误：

不允许使用自定义JavaScript

除列入白名单的字体提供程序外，不支持外部样式表。

如何解决？

对于W3 Total Cache，您需要激活AMP扩展。这将从AMP页面中删除所有自定义JS和CSS。转到您的站点“管理控制台”-“性能”-“扩展”并激活AMP。该扩展内置W3 Total Cache。您只需要激活它即可。

这里有一个逐步的教程：https://josephkhan.me/custom-javascript-is-not-allowed-amp/ 这是一个YouTube视频，显示解决此问题的步骤：https://youtu.be/Luy1P1g7BEc

Answer 3

我在 this AMP page 上遇到了同样的问题，在浏览了所有答案、博客和视频后，我的解决方案是禁用 AMP 帖子中的评论。

Answer 4

AMP 现在支持自定义 JS。您可以使用 amp-script 并使其指向脚本。但是对于性能问题，您必须添加 type="text/plain"。看看下面带有 amp-list 的例子。

<amp-script layout="fixed-height" height="100" id="dataFunctions" script="fetch-data-script"> </amp-script>

<script id="fetch-data-script" type="text/plain" target="amp-script">
   function fetchData() {
      const data = {
        // follow this format for amp-list
        items: [
            { id: 1, name: "Tom" },
            { id: 2, name: "Jerry" },
        ],
      };
      return data;
    }

exportFunction("fetchData", fetchData);

</script>

<amp-list id="amp-list" width="auto" height="100" layout="fixed-height" src="amp-script:dataFunctions.fetchData" template="myTemplate">
    <div placeholder>Loading ...</div>
    <div fallback>Failed to load data.</div>

    <template type="amp-mustache" id="myTemplate">
        <div>
            <h4>
                {{id}}. {{name}}
            </h4>
        </div>
    </template>
</amp-list>

我想在这里指出一些细节。

1. script 的amp-script 属性应与脚本标记的 id 属性匹配。
2. id 的 amp-script 属性应与函数名称一起在 amp-script 的 src 属性中提及。