我收到此错误：Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').
我的页面按照我希望的那样运行(我没有注意到任何不需要的行为)，但我从不喜欢忽略控制台中的错误，特别是如果我什至不了解根本原因。
我的问题不是重复的，因为我已经研究了所有这些问题，但没有一个答案有效：
- 无法在"DOMWindow"上执行"postMessage"：https://www.youtube.com！== http://localhost:9000
- 无法在"DOMWindow"上执行"postMessage"：提供的目标源与收件人窗口的源不匹配("null")
- Youtube API - 无法在"DOMWindow"上执行"postMessage">
- YouTube API 和跨源请求
- YouTube iFrame Player API 无法在 DOMWindow 上执行 postMessage
- 无法在"DOMWindow"上执行"postMessage"：目标/源不匹配 http 与 https
我已经在使用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,
});
}
};
想法？
由于您似乎正在使用延迟加载，请尝试删除 iframe HTML 属性loading="lazy"- 这为我解决了这个问题。
TLDR;不是真正的答案，但可能有助于谷歌工程师追踪这个问题。
我注意到这个问题仅在创建多个播放器时出现。
我有一个页面，可以创建多个播放器来填充滚动视图。
我注意到我收到的错误消息比创建的播放器少一条，因此添加了一个开关，强制页面仅创建一个播放器，然后忽略所有其他请求。
自定义交换机代码：永久链接
createOnePlayerOnly = location.search.indexOf('oneplayer')>=0 ? true : false,
这会导致单个播放器加载正常，没有错误(还有其他错误与Chrome不再附带的Chromecast扩展程序相关，这些错误与AFAIK无关)
每个播放器始终通过相同的代码创建，该代码始终设置原点和小部件
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 代码可能无法正确从选项中获取原点值。 不知道为什么会这样，但这可能与缓存或范围问题有关。
我认为我们可以自定义YT的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)
}
}
我使用此功能在我的项目中解决。
我的起源答案