无法在 'DOMWindow' 上执行 'postMessage'：提供的目标来源 ('<URL>') 与收件人窗口的来源 ('<URL>') 不匹配答案

【问题标题】：Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>')无法在 'DOMWindow' 上执行 'postMessage'：提供的目标来源 ('<URL>') 与收件人窗口的来源 ('<URL>') 不匹配
【发布时间】：2019-12-30 04:05:45
【问题描述】：

我收到此错误：Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').

我的页面按我希望的方式运行（我没有注意到任何不良行为），但我从不喜欢忽略控制台中的错误，尤其是当我什至不了解根本原因时。

我的问题不是重复的，因为我已经研究了所有这些问题，但没有一个答案有效：

我已经在使用https。

我已经尝试将playerVars 设置为{origin: window.location.origin}。

我已经尝试过设置host。

我已经尝试过更改 iframe 的可见性。

等等。

var playerVars = {origin: window.location.origin};//https://stackoverflow.com/a/50518247/470749
window.onYouTubeIframeAPIReady = function () {
    for (var i = 0; i < youtube.length; i++) {
        var youtubeLazyEl = youtube[i];
        var videoId = youtubeLazyEl.dataset.v;
        players[videoId] = new YT.Player(videoId, {
            videoId: videoId,
            //host: 'https://www.youtube.com', //https://stackoverflow.com/a/47914456/470749
            //playerVars: playerVars,
        });
    }
};

想法？

【问题讨论】：

您找到解决方案了吗？在尝试了其他线程中建议的所有解决方案后，我仍然遇到此错误。
@Sarcadass 不幸的是没有。如果您找到了，请在此处发布！

标签： youtube youtube-api youtube-javascript-api youtube-iframe-api

【解决方案1】：

由于您似乎在使用延迟加载，请尝试删除 iframes HTML 属性loading="lazy" - 这为我解决了问题。

【讨论】：

【解决方案2】：

TLDR;不是真正的答案，但可能会帮助谷歌工程师追查这个问题。

我注意到这个问题只有在创建多个玩家时才会出现。

我有一个page，它可以创建多个玩家来填充滚动视图。

我注意到我收到的错误消息比创建的玩家少一条，因此添加了a switch，强制页面为only create one player，然后忽略所有其他请求。

自定义开关码：permalink

 createOnePlayerOnly = location.search.indexOf('oneplayer')>=0 ? true : false,

这会导致单个玩家load fine，没有错误（还有其他与不再随 chrome 一起提供的 chromecast 扩展相关的错误，与 AFAIK 无关）

每个玩家总是被创建via the same code，它总是设置原点和小部件

    playerVars: info.playerVars || {
      fs: 1,
      controls: 0,
      playsinline: 0,
      enablejsapi: 0,
      modestbranding: 1,
      disablekb: 1,
      autohide: 1,
      autoplay: 0,
      loop: 0,
      volume: 0,
      iv_load_policy: 3,
      origin: location.href,
      widget_referrer : location.href
    }

因此，当添加其他播放器时，iframe 代码可能无法正确地从选项中获取原始值。不知道为什么会这样，但可能与缓存或范围问题有关。

【讨论】：

我还注意到将 enablejsapi 设置为 1 会导致错误发生，但是将其设置为 0 似乎并不能阻止 javascript api 工作，因此我将其设置为 0。这个也可能会给谷歌工程师一些关于发生了什么的线索。

【解决方案3】：

我认为我们可以自定义 YT.Player 的 sendMessage

playerOptions.playerVars.origin = window.location.origin or your domain.
this.youtubePlayer = new YT.Player(element,playerOptions);
this.youtubePlayer.sendMessage = function (a) {
   a.id = this.id, a.channel = "widget", a = JSON.stringify(a);
   var url = new URL(this.h.src), origin = url.searchParams.get("origin");
   if (origin && this.h.contentWindow) {
       this.h.contentWindow.postMessage(a, origin)
   }
}

我在我的项目中使用了这个函数来解决。

My Origin answer

【讨论】：