Youtube API - 无法在“DOMWindow”上执行“postMessage”

Posted 2023-02-24

【中文标题】Youtube API - 无法在“DOMWindow”上执行“postMessage”

【英文标题】：Youtube API - Failed to execute 'postMessage' on 'DOMWindow'

【发布时间】：2018-05-29 17:50:12

【问题描述】：

我正在尝试在打开模式时开始播放 youtube 视频，并且在完成之前不会进入下一页。

我下面的脚本在 Chrome 中工作，但在 Firefox 和 Edge 中产生此错误。

在“DOMWindow”上执行“postMessage”失败：目标来源 提供的 ('https://www.youtube.com') 与收件人不匹配 窗口的原点 ('http://example.com')。

Javascript

<script src="http://www.youtube.com/player_api"></script>

<script>

    // autoplay video
    function onPlayerReady(event) 
        event.target.playVideo();
    

    // when video ends
    function onPlayerStateChange(event)         
        if(event.data === 0)           
            alert('Thank you for watching - Click OK to see your results');
        
    

</script>

<script language="javascript">
    $(document).ready(function() 
        $('#post_form').submit(function()  // catch the form's submit event
            $("#adModal").modal("show");
            var time = $('#adtime').val();
            //startCountdownTimer(time) ;

            // create youtube player
            var player;
            player = new YT.Player('player', 
                width: '640',
                height: '390',
                videoId: 'EF-jwIv1w68',
                host: 'http://www.youtube.com',
                events: 
                    onReady: onPlayerReady,
                    onStateChange: onPlayerStateChange
                
            );

        );
    );
</script>

我已查看 this question/answer，但似乎无法通过修改 http / https 使其与我的代码一起使用。

【问题讨论】：

你可能想读这个问题：***.com/questions/10636611/…

@Adelin 抱歉，我不明白这有什么帮助

什么是“模态”库？

这对我有帮助 ***.com/questions/50857499/…

【参考方案1】：

我认为该错误消息有点误导，因为它与您的实际主机无关，而是更多关于如何在页面上引用来自 youtube.com 的资源。

为了摆脱这个错误信息，我建议做两件事。 （至少这些对我来说是有效的。）

首先，您应该通过https 引用IFrame Player API 脚本。当使用 http 调用时，YouTube 会自动将该脚本请求重定向到其对应的 https，因此如果您直接从 https 引用该脚本，则可以消除这种情况额外的重定向。但最重要的是，如果您的生产环境曾经转到 https，它不会通过 http 加载该脚本，而是会抛出“Blocked loading mixed active content”错误。

根据我的测试，仅此一项更改就可以神奇地解决问题。但是，如果您希望将其保留在 http 上，还有另一件事：

阅读 API 文档的 Loading a Video Player 和 Supported Parameters 部分，根本没有提到 host 参数。事实上，当我从 Player 参数中删除该行时，我不再收到错误消息。另外，有趣的是，当我将host 逐字设置为http://www.example.com 时，错误消息显示为：The target origin provided (‘http://www.example.com’) does not match the recipient window’s origin …。）因此我认为host 参数不应由客户端设置。

旁注：如果您查看https://www.youtube.com/player_api 的内容，您会看到以下语句：var YTConfig = 'host': 'http://www.youtube.com';。对我来说，这意味着http://www.youtube.com 无论如何都是host 的某种默认值，所以即使你在客户端代码中设置它，你也可以尝试将它设置为https://www.youtube.com。

长话短说，尝试使用<script src="https://www.youtube.com/player_api"></script> 并注释掉host。这是我的 2 美分。

【讨论】：

遗憾的是，对我们来说，删除 YT 定义的 host 部分并没有解决来自 youtube 的错误。这甚至是在 2020 年，现在哈哈。此外，这里的一切都是 https，因此问题没有任何断开。这只是那些恼人的错误之一，似乎对 youtube 视频的功能的实际影响为零。

@TheDeadMan 否。在测试它的数百次页面刷新后，它似乎是由 youtube iframe api 中的种族问题（异步）引起的良性错误（有时会发生，有时不会）。由于这完全是他们的结局，我们无能为力。

【参考方案2】：

解决方案很简单，虽然我不知道为什么。通过从模态中删除 api 它工作正常。在模态中它不会。

【参考方案3】：

我的网站配置为没有www，而 youtube 链接使用www，这就是我收到此错误的原因。 试着让它相似，我从我的 youtube 中删除了www，它可以工作。

【参考方案4】：

在我的情况下（类似于此处选择的答案Youtube API error - Failed to execute 'postMessage' on 'DOMWindow':）归结为在播放器实例化时视频在页面上不可见。

【讨论】：

我对此充满希望，但我仍然收到Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').

【参考方案5】：

在我的案例中，“widget_referrer”丢失了。如果没有什么对你有用，试试 widget_referrer :window.location.href

其他可能会错过的属性是

来源：window.location.href， 启用jsapi:1，