时间戳

首页 > 解决方案 > 无法在“DOMWindow”上执行“postMessage”：提供的目标来源（“') 不匹配收件人窗口的来源 ('')

youtube - 无法在“DOMWindow”上执行“postMessage”：提供的目标来源（“') 不匹配收件人窗口的来源 ('')

问题描述

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

想法？

标签： youtubeyoutube-apiyoutube-javascript-apiyoutube-iframe-api

解决方案

我认为我们可以自定义 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)
   }
}

我在我的项目中使用此功能来解决。

我的起源答案

推荐阅读