Javascript 移动<；脚本>；将内容保存到单独的JS文件中

我有更新视频id的工作代码。但是，当我将所有JS代码从脚本标记移动到JS文件时，代码中断。代码不会加载，因此不会加载iframeapi，也不会执行单击事件

 <Script>
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId:  '{{no-video-id}}',
      events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
                           });
  }


  // 4. The API will call this function when the video player is ready.

  function onPlayerReady(event) {

    $('.open-popup').click(function() {
      event.target.playVideo();
    });

    $('.close-popup').click(function(e) {
      player.stopVideo();
    });

  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if(event.data === 0) {           
      $('.close.close-popup').click();
    }
  }
  function stopVideo() {
    player.stopVideo();
  }

 $(function () { 
   $('#my_modal').on('show.bs.modal', function(e) {
      var bookId = $(e.relatedTarget).data('book-id');
      $(e.currentTarget).find('input[name="bookId"]').val(bookId);
      var x = new String(bookId);
      player.loadVideoById(x); 

  });


  $('#video-player-1').click(function(e) {
       var bookId = $(e.relatedTarget).data('book-id');
      var x = new String(bookId);
      player.loadVideoById(x);
      alert("HEELO");
      });

  $( "#video-player-2" ).click(function() {
    alert( "Handler for .click() called." );
  });
});
</script>

var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:“{{无视频id}}”，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
// 4. 当视频播放器准备就绪时，API将调用此函数。
函数onPlayerReady（事件）{
$（'.open popup'）。单击（函数（）{
event.target.playVideo（）；
});
$（'.close popup'）。单击（函数（e）{
player.stopVideo（）；
});
}
// 5. 当播放器的状态改变时，API调用此函数。
//该功能指示播放视频时（状态=1），
//玩家应该玩六秒钟，然后停下来。
var done=false；
函数onPlayerStateChange（事件）{
如果（event.data==0）{
$（'.close.close popup'）。单击（）；
}
}
函数stopVideo（）{
player.stopVideo（）；
}
$（函数（）{
$（'my#u model'）。on（'show.bs.model'，function（e）{
var bookId=$（e.relatedTarget）.data（'book-id'）；
$（e.currentTarget）.find（'input[name=“bookId”]'）.val（bookId）；
var x=新字符串（bookId）；
player.loadVideoById（x）；
});
$（'#video-player-1'）。单击（函数（e）{
var bookId=$（e.relatedTarget）.data（'book-id'）；
var x=新字符串（bookId）；
player.loadVideoById（x）；
警惕（“HEELO”）；
});
$（“#视频播放器-2”）。单击（函数（）{
警报（“调用了.click（）的处理程序”）；
});
});

这是JS提琴，显示移动到单独文件中的代码。

当我单击标记时，我在控制台中得到“TypeError:undefined不是一个对象（评估'player.loadVideoById'）”

---

更新解决方案：在html中添加

请在加载完成后调用onYouTubeIframeAPIReady方法，加载html需要时间。而你的球员是未定义的

并添加脚本标记

<script src="https://www.youtube.com/iframe_api"></script> 

您在开发工具中看到了什么？当我单击时，我得到了TypeError:undefined不是一个对象（评估'player.loadVideoById'）。请阅读。当外部资源消失或固定时，依赖外部资源理解的问题将变得无用。创建一个，并把它放在问题本身中。就我所见，问题与将JS移动到外部文件无关。问问自己应该在哪里定义

player

，以及为什么不应该这样做。@昆汀，如果我将所有js代码移到script标记中，它确实会起作用。代码会在模式中添加一个iframe，因此如果代码起作用，你应该看到youtube视频播放。你有一个好主意，但没有解决问题。还有其他想法吗？@user2012677现在YT还没有定义，让我看看是从哪里来的。我读到可能我需要在api函数中添加“window.”，但不确定如何修改这段代码来实现这一点。现在请检查链接，它正在工作。在这里，我只是将脚本标记直接添加到html@user2012677您使用javascript动态加载脚本，但在这里您没有任何回调来跟踪api加载完成。所以我将它作为html的一部分移动到，这意味着它将在jQuery loadcomplete上可用

<script src="https://www.youtube.com/iframe_api"></script>