我收到此错误:
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,
});
}
};
想法?
由于您似乎正在使用延迟加载,请尝试删除 iframes HTML 属性
loading="lazy"
- 这为我解决了问题。
TLDR;不是真正的答案,但可能会帮助谷歌工程师追踪这个问题。
我注意到这个问题只有在创建多个玩家时才会出现。
我有一个页面,它创建多个玩家来填充滚动视图。
我注意到我收到的错误消息比创建的玩家少了一条,因此添加了一个开关,强制页面只创建一个玩家然后忽略所有其他请求。
自定义开关代码:永久链接
createOnePlayerOnly = location.search.indexOf('oneplayer')>=0 ? true : false,
这会导致单个播放器加载良好,没有错误(还有与 chromecast 扩展相关的其他错误,不再随 chrome 一起提供,据我所知,这些错误与此无关)
每个玩家总是通过相同的代码创建,并且总是设置原点和小部件
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 代码可能无法正确从选项中获取原始值。不确定为什么会这样,但这可能与缓存或范围问题有关。
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)
}
}
我在我的项目中使用了这个函数来解析。