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>

...工作正常。：）

如何与Mixcloud Widget交互？

1 个答案: