Vue.js 如何与Mixcloud小部件交互？

我有一个包含混合云嵌入的组件，下面是代码：

<template>
  <div>
  <iframe id="widget" width="100%" height="60" :src="iframe.src" frameborder="0" v-show="iframe.loaded"></iframe>

 </div>
</template>

控制台说：

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.mixcloud.com') does not match the recipient window's origin

Uncaught TypeError: widget.pause is not a function

我相信这是因为嵌入是异步加载的。 感谢您的帮助。

模板：

组成部分：

变量小部件
导出默认值{
名称：“mixcloud”，
计算：{
链接：函数（）{
// ...
返回链接
}
},
方法：{
mountApi：函数（）{
//eslint禁用下一行
widget=Mixcloud.PlayerWidget（document.getElementById（'Mixcloud'））
},
播放：函数（）{
widget.play（）
},
暂停：函数（）{
widget.pause（）
}
}
}

---

…很好。：）

关于Vue的代码get执行

document.getElementById（“小部件”）

在哪里？执行时，id为

小部件
的iframe可能不存在
var widget = Mixcloud.PlayerWidget(document.getElementById("widget"));
widget.pause();  

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.mixcloud.com') does not match the recipient window's origin

Uncaught TypeError: widget.pause is not a function