嵌入Mixcloud iframe播放器调用Widget API遇postMessage跨域错误求助

Mixcloud在2023年9月调整了播放器的域名映射逻辑，官方提供的widgetApi.js脚本中硬编码的目标origin（https://player-widget.mixcloud.com）与当前iframe实际运行的域名（https://www.mixcloud.com）不匹配，导致浏览器的跨域postMessage验证失败——Chrome严格执行该验证直接阻断交互，Safari仅抛出警告但仍允许部分交互。

方案1：修改iframe的src域名 #

将iframe的src开头从https://www.mixcloud.com替换为https://player-widget.mixcloud.com，让iframe的运行域名与官方脚本的目标origin一致：

<iframe
    id="my-widget-iframe"
    src="https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&mini=1&light=1&hide_artwork=1&autoplay=0&feed=%2Feosradio%2Fani-kvirkvelia-27-may-2022%2F"
    width="100%"
    height="60"
    frameborder="0"
    allow="autoplay"
></iframe>

保留原有的widgetApi.js引用和初始化代码即可恢复正常交互。

方案2：自定义交互逻辑（无需依赖官方脚本） #

如果不想依赖未更新的官方脚本，可以自己实现核心的播放器交互逻辑，手动处理postMessage并指定正确的目标origin：

1. 移除官方的widgetApi.js引用
2. 使用以下自定义代码：

const iframe = document.getElementById('my-widget-iframe');
const widget = {
  // 示例：播放/暂停控制
  togglePlay: () => {
    iframe.contentWindow.postMessage({ method: 'togglePlay' }, 'https://www.mixcloud.com');
  },
  // 监听播放器事件（如播放状态变化）
  on: (eventName, callback) => {
    window.addEventListener('message', (e) => {
      if (e.origin === 'https://www.mixcloud.com' && e.data.event === eventName) {
        callback(e.data.data);
      }
    });
  }
};

// 使用示例
widget.on('play', () => console.log('播放器开始播放'));
widget.togglePlay();

这种方式更灵活，也避免了官方脚本过时的问题，所有消息的目标origin指定为https://www.mixcloud.com即可匹配当前iframe的实际域名。

• 无论哪种方案，在HTTPS生产环境和localhost开发环境都能正常工作
• 若后续Mixcloud再次调整域名，只需同步修改postMessage的目标origin或iframe的src域名即可

内容的提问来源于stack exchange，提问作者Moritz