这是我得到的错误信息:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://www.youtube.com') does not match the recipient window's origin 
('http://localhost:9000').

我见过其他类似的问题,其中目标源是http://www.youtube.com,收件人源是https://www.youtube.com,但没有一个像我的问题一样,目标是https://www.youtube.com,源是http://localhost:9000。

我不明白这个问题。有什么问题吗? 我该怎么解决呢?


当前回答

我在尝试嵌入一个条纹定价表时得到了类似的错误消息:

通过自定义WordPress短代码通过PHP添加嵌入代码 或者使用JavaScript动态地将代码追加到页面(即使使用setTimeout()延迟来确保DOM被加载也不起作用)。

我可以在我的WordPress网站上解决这个问题,方法是在块编辑器中使用纯html代码将代码添加到WordPress页面本身。

其他回答

我在尝试嵌入一个条纹定价表时得到了类似的错误消息:

通过自定义WordPress短代码通过PHP添加嵌入代码 或者使用JavaScript动态地将代码追加到页面(即使使用setTimeout()延迟来确保DOM被加载也不起作用)。

我可以在我的WordPress网站上解决这个问题,方法是在块编辑器中使用纯html代码将代码添加到WordPress页面本身。

我也有同样的问题,原来是因为我有Chrome扩展“HTTPS无处不在”运行。禁用扩展解决了我的问题。

当您在调用window.postMessage()时没有指定targetOrigin时,也会收到此消息。

在本例中,我们向第一个iFrame发送消息,并使用*作为目标,这应该允许与任何targetOrigin通信。

window.frames[0].postMessage({
                    message : "Hi there",
                    command :"hi-there-command",
                    data : "Some Data"
                }, '*')

为了避免控制台错误,我使用了类似Artur之前回答的方法来解决这个问题,以下步骤:

Downloaded the YouTube Iframe API (from https://www.youtube.com/iframe_api) to a local yt-api.js file. Removed the code which inserted the www-widgetapi.js script. Downloaded the www-widgetapi.js script (from https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl7VfO1r/www-widgetapi.js) to a local www-widgetapi.js file. Replaced the targetOrigin argument in the postMessage call which was causing the error in the console, with a "*" (indicating no preference - see https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). Appended the modified www-widgetapi.js script to the end of the yt-api.js script.

这不是最好的解决方案(修补本地脚本来维护,失去对消息发送位置的控制),但它解决了我的问题。

在使用此解决方案之前,请参阅此处关于删除targetOrigin URI的安全警告- https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

修复了yt-api.js的例子

尝试使用window.location.href作为url来匹配窗口的原点。