Question

我收到此错误：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,
        });
    }
};

想法？

Answer 1

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

Answer 2

TLDR；不是真正的答案，但可能有助于谷歌工程师追踪这个问题。

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

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

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

自定义开关代码：permalink

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

这会导致单个播放器 load fine，没有错误（还有其他错误与 chromecast 扩展程序不再随 chrome 一起提供，这些错误与 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 代码可能无法从选项中正确获取原始值。不知道为什么会这样，但这可能与缓存或范围问题有关。

无法在'DOMWindow'上执行'postMessage'：提供的目标原点（'<URL>'）与收件人窗口的原点（'<URL>'）不匹配

2 个答案: