这是我得到的错误信息:

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。

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


当前回答

扩展上面@Hokascha的回答,对我来说也是惰性加载,被WordPress自动添加。这段代码将删除站点iframes上的所有延迟加载(添加到functions.php):

function disable_post_content_iframe_lazy_loading( $default, $tag_name, $context ) {
    if ( 'iframe' === $tag_name ) {
        return false;
    }
    return $default;
}
add_filter('wp_lazy_loading_enabled', 'disable_post_content_iframe_lazy_loading', 10, 3);

其他回答

添加= $ {window.location起源。Host}或“*”是不够的。

在它之前添加https://,它就可以工作了。

另外,确保您使用的是一个可以嵌入的URL:去掉视频ID,并连接一个包含YouTube视频前缀和视频ID +嵌入定义的字符串。

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

我相信这是一个问题与目标来源是https。我怀疑这是因为你的iFrame url使用的是http而不是https。尝试将您要嵌入的文件的url更改为https。

例如:

'//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

是:

'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

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

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

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

在我的情况下,这与延迟加载iframe有关。删除iframe HTML属性loading="lazy"为我解决了这个问题。