javascript代码适用于沙盒，但不适用于实际网站答案

【问题标题】：The javascript code works on sandbox but not on the actual websitejavascript代码适用于沙盒，但不适用于实际网站
【发布时间】：2021-05-08 06:56:49
【问题描述】：

我一直在尝试为我的网站实现一项功能。它应该在另一个运行时停止嵌入 YouTube 视频。所以我在某个地方找到了一个使用 javascript 和 jquery 的工作代码，试图绕过它，一切正常，但直到我在 wordpress 上的实际网站上输入。我想插入的 javascript/jquery 根本无法运行，但我必须承认我的 javascript 知识非常有限。我的代码：

$(function() {
  players = new Array();

  function onYouTubeIframeAPIReady() {
    var temp = $("iframe.yt_players");
    for (var i = 0; i < temp.length; i++) {
      var t = new YT.Player($(temp[i]).attr('id'), {
        events: {
          'onStateChange': onPlayerStateChange
        }
      });
      players.push(t);
    }

  }
  onYouTubeIframeAPIReady();


  function onPlayerStateChange(event) {

    if (event.data == YT.PlayerState.PLAYING) {
      var temp = event.target.a.id;
      var tempPlayers = $("iframe.yt_players");
      for (var i = 0; i < players.length; i++) {
        if (players[i].a.id != temp) players[i].stopVideo();
      }
    }
  }
});

<html>

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflS50iB-/www-widgetapi.js" async=""></script>
  <script type="text/javascript" src="https://www.youtube.com/player_api"></script>
</head>

<body>
  <iframe class="yt_players lazy" id=player0 width=385 height=230 src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder=0 allowfullscreen data-src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0"></iframe>
  <iframe class="yt_players lazy" id=player1 width=385 height=230 src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder=0 allowfullscreen data-src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0"></iframe>
  <iframe class="yt_players lazy" id=player2 width=385 height=230 src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder=0 allowfullscreen data-src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0"></iframe>

</body>

</html>

到目前为止我检查过的内容：

Jquery 工作正常。
我认为由于我的网站使用延迟加载选项，代码可能会以某种方式更改，但似乎代码保持不变。 javascript 代码也是如此。
我没有看到任何控制台错误。
我尝试将脚本放在任何可能的位置，没有任何变化。
试图包装在 $(function)() 中，但也没有成功。
检查了多个沙盒/游乐场，代码在每一个都有效。

这可能是什么问题，我还应该尝试什么？感谢您的帮助！

【问题讨论】：

在此处发布您的代码，而不是作为外部网站的链接。
$(document).ready(function() { ... }); 有什么改变吗
@DaMahdi03 同$(function(){...})
wordpress 网站的控制台有哪些错误？
@letthewookieewin 当我将脚本放入 html（看到其他人建议的）时，它没有给我任何错误。如果我尝试将 js/jquery 放在页脚中，这是建议的方式（至少在我的主题的帮助中心），我会看到错误 Uncaught TypeError: YT.Player is not a constructor。它似乎不会发生在沙盒上。

标签： javascript jquery api youtube

【解决方案1】：

我要做的第一件事是，在您遇到问题的网站上，按 F12（如果是 IE 或 Chrome）以调出开发人员工具，如果在 Mac 上则启用网络检查器。检查网络选项卡并确保您依赖的资源都具有状态 200 或使用您拥有的任何缓存方案进行缓存。

然后从控制台选项卡查看您的控制台错误。从您包含的链接中，这是控制台选项卡上重复的消息：

"Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>')."

因此，只需比较开发人员工具控制台和网络选项卡的工作时间和不工作时的相同情况，并查找控制台错误。

如果我发现的是主要问题，您可以在此处查看解决方案： Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://localhost:9000

【讨论】：