如何与Mixcloud Widget交互？

Question

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

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

 </div>
</template>

我已经在根文件中加载了mixcloud小部件API：

<script src="//widget.mixcloud.com/media/js/widgetApi.js" type="text/javascript"></script>

但是我不能和玩家互动：

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

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

Answer 1

模板：

    <template>
      <div>
        <iframe
          id="mixcloud"
          :src="link"
          @load="mountApi"
          width="100%"
          height="120"
          frameborder="0"
          allow="autoplay"
        >
        </iframe>
      </div>
    </template>

组件：

    <script>
    var widget

    export default {
      name: 'mixcloud',
      computed: {
        link: function () {
          // ...
          return link
        }
      },
      methods: {
        mountApi: function () {
          // eslint-disable-next-line
          widget = Mixcloud.PlayerWidget(document.getElementById('mixcloud'))
        },
        play: function () {
          widget.play()
        },
        pause: function () {
          widget.pause()
        }
      }
    }
    </script>

...works很好。:)