刷新页面后 Javascript 不起作用 - 为什么？

Question

我有 3 个滑块，每个滑块有 1 个 Youtube 视频。

每个视频都有定制的开始/停止 javascript 按钮。

第一次加载页面时，我的脚本运行良好。刷新后，javascript 按钮不再起作用。事实上，除非我清除缓存，否则它们将无法工作，而且我什至需要重新启动浏览器。

感谢您的任何提示！

// START STOP YOUTUBE VIDEO

  	// Inject YouTube API script
	    var tag = document.createElement('script');
	    tag.src = "//www.youtube.com/player_api";
	    var firstScriptTag = document.getElementsByTagName('script')[0];
	    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    // Set global variable for the player
      var playerA;
      var playerB;
      var playerC;

    // this function gets called when API is ready to use
	    function onYouTubePlayerAPIReady() {
	      
	      // create the global player from the specific iframe (#video)
	      
	      // for Slider 1
		        playerA = new YT.Player('player1', {
		          events: {
		            // call this function when player is ready to use
		            'onReady': onPlayerReady
		          }
		        });

	      // for Slider 2
		        playerB = new YT.Player('player2', {
		          events: {
		            // call this function when player is ready to use
		            'onReady': onPlayerReady
		          }
		        });

	      // for Slider 3
		        playerC = new YT.Player('player3', {
		          events: {
		            // call this function when player is ready to use
		            'onReady': onPlayerReady
		          }
		        });
	    
	    };

	// Bind Events
	    function onPlayerReady(event) {
	      
		    // bind Slider 1 events

		      var playButton = document.getElementById("VideoPlayBtn1");
		      playButton.addEventListener("click", function() {
		        playerA.playVideo();
		      });
		      
		      var pauseButton = document.getElementById("VideoPauseBtn1");
		      pauseButton.addEventListener("click", function() {
		        playerA.pauseVideo();
		      });


		    // bind Slider 2 events
		      
		      var playButton = document.getElementById("VideoPlayBtn2");
		      playButton.addEventListener("click", function() {
		        playerB.playVideo();
		      });
		      
		      var pauseButton = document.getElementById("VideoPauseBtn2");
		      pauseButton.addEventListener("click", function() {
		        playerB.pauseVideo();
		      });

		    // bind Slider 3 events
		      
		      var playButton = document.getElementById("VideoPlayBtn3");
		      playButton.addEventListener("click", function() {
		        playerB.playVideo();
		      });
		      
		      var pauseButton = document.getElementById("VideoPauseBtn3");
		      pauseButton.addEventListener("click", function() {
		        playerB.pauseVideo();
		      });
		      
		};

<iframe id="player1" class="VideoA" src="https://www.youtube.com/embed/C0DPdy98e4c?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen="0"></iframe>

<button id="VideoPlayBtn1" >Play</button></div>
<button id="VideoPauseBtn1">Pause</button></div>

<iframe id="player1" class="VideoA" src="https://www.youtube.com/embed/C0DPdy98e4c?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen="0"></iframe>


<button id="VideoPlayBtn2" >Play2</button></div>
<button id="VideoPauseBtn2">Pause2</button></div>

<iframe id="player3" class="VideoA" src="https://www.youtube.com/embed/C0DPdy98e4c?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen="0"></iframe>

<button id="VideoPlayBtn3" >Play3</button></div>
<button id="VideoPauseBtn3">Pause3</button></div>

Answer 1

您可以通过在java脚本中实现以下代码来刷新页面

使用 location.reload();方法。

更多信息请参考this