javascript - WordPress 小部件中的 Canva 按钮

Question

我想使用canva我的 WordPress 小部件中的按钮。

当您创建canva按钮时，它们会向您提供代码，您可以将其复制并粘贴到您的网站中，在我的例子中是在小部件UI中。代码如下所示:

<span data-type="poster" data-apikey="3KIFIE6ZHYTPUYNZF3V7" class="canva-design-button">Design a poster</span>

<script>(function(c,a,n){var w=c.createElement(a),s=c.getElementsByTagName(a)[0];w.src=n;s.parentNode.insertBefore(w,s);})(document,'script','https://sdk.canva.com/v1/api.js');</script>

Span是按钮，javascript将在head中包含一个canva js文件，该文件将设置按钮的样式并在其上添加点击事件。当您单击该按钮时，您将弹出窗口以创建一些设计。

这里是demo当您将 Canva 按钮放在前端时，它看起来是什么样子。

这是我在小部件 UI 中如何使用它的屏幕截图:

问题是，当我将小部件拖放到侧边栏中并且 Canvas 弹出窗口未显示时，单击事件不起作用。在侧边栏中拖放小部件后，我需要刷新页面以使单击事件起作用。我猜这是因为 Widget 的 HTML 会附加到侧边栏，但点击事件已经添加了。

有没有办法用一些 JavaScript 代码来处理它。需要说的是，我无法更改 Canva javascript 文件，因此我需要使用我的 javascript 来完成此操作

Answer 1

data-api-key 由canva 提供。示例一无效。