Question

我有用纯Javascript编写的小部件。加载时，它将在页面底部创建一个按钮。单击该按钮会在iframe上创建并在其中加载我的聊天机器人网站。

我有一个小片段，将小部件的js和css加载到dom中。

以下是示例用法：

<script>(function (w, d, s, l, i) {
    w[l]    = i;
    var f   = d.getElementsByTagName(s)[0], j = d.createElement(s);
    j.async = true;
    j.src   = 'https://intaker.co/dist/chat-widget.min.js';
    f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'SU5UQUtFUl9DSEFUX1VSTA==', 'aHR0cHM6Ly9hdHRvcm5leS5jaGF0L2ZhcmhhZA==');</script>

现在，我需要使其与AMP页兼容。我一直在阅读文档并制作了一个组件。但是似乎无法将小部件的外部脚本加载到组件中！

所以我必须将整个小部件重写为AMP组件吗？有任何人有将这样的小部件转换为AMP组件的经验吗？

我真的不想保留相同代码的2个版本：（

更新：我还没有创建任何组件，只是helloworld入门示例https://codelabs.developers.google.com/codelabs/creating-your-first-amp-component/index.html?index=..%2F..index#0，我不知道如何将外部脚本嵌入到该组件中（这似乎是不可能的！）。

UPDATE2：我认为我可以使用amp-script，但不确定
UPDATE3：:( NOPE amp-script是实验性的，不能在生产模块中使用

Answer 1

您的选择是

自定义放大器组件
amp-iframe

自定义组件

使用自定义amp组件，您可以探索扩展amp-iframe并在该iframe中加载网站内容。另外，您也可以从头开始构建它，从现有小部件的JS中提取必要的逻辑，并了解放大器组件的生命周期，并在需要的地方放置适当的逻辑。请注意，采用这种方法的好处是，如果需要或可能的话，其他人可以在其站点上使用您的组件。

AMP Iframe

只需将您的小部件加载到AMP iframe中即可。

如何将js小部件转换为amp组件

1 个答案: