1

我有以下代码，使用他们的 Javascript API 在我的页面中跟踪嵌入的 Youtube 视频是必需的：

function onYouTubePlayerReady(playerId) {
      var youtubeplayer = document.getElementById('youtubeplayer');
      youtubeplayer.addEventListener("onStateChange", "onytplayerStateChange");
      youtubeplayer.setPlaybackQuality('large');
      }

function onytplayerStateChange(newState) {
    //Make it autoplay on page load
    if (newState == -1) {
        youtubeplayer.playVideo();
        }

    var tiempo = youtubeplayer.getCurrentTime();
    //Rounds to 2 decimals
    var tiempo = Math.round(tiempo*100)/100;
    alert(tiempo);
    }

（与 Youtube API 相关的细节并不重要，但如果你好奇，可以参考我之前的问题 Youtube Javascript API: not working in IE）。

现在，我的问题是 onYoutubePlayerReady() 函数声明了“youtubeplayer”，它是对 DOM 对象的引用，我也需要从另一个函数 onytplayerstateChange() 访问该变量......但是正在声明“youtubeplayer”作为局部变量。这适用于 IE 8、Safari ...，但不适用于 Firefox 12。当然，我可以通过以下方式获得对“youtubeplayer”的引用，而不需要“var”：

youtubeplayer = document.getElementById('youtubeplayer');

事实上，这就是它在 Youtube 的示例代码中的样子，但如果我这样写，代码在 IE 8 中不起作用（而它在 Firefox 12 中起作用；有关更多详细信息，请参阅我之前的问题）。

...所有这些都让我想到：有没有办法从函数内部声明一个全局变量（如上面的“youtubeplayer”），以便其他函数也可以访问它？适用于所有浏览器的东西？

4

2 回答 2

3

声明全局变量的另一种方法是将其创建为全局“窗口”对象的额外属性——也是如此

window.youtubeplayer = document.getElementById('youtubeplayer');

页面上的任何其他内容都应该可以访问它。所以你的完整代码看起来像这样；

function onYouTubePlayerReady(playerId) {
  window.youtubeplayer = document.getElementById('youtubeplayer');
  window.youtubeplayer.addEventListener("onStateChange", "onytplayerStateChange");
  window.youtubeplayer.setPlaybackQuality('large');
}

function onytplayerStateChange(newState) {
  //Make it autoplay on page load
  if (newState == -1) {
    window.youtubeplayer.playVideo();
  }

  var tiempo = window.youtubeplayer.getCurrentTime();
  //Rounds to 2 decimals
  var tiempo = Math.round(tiempo*100)/100;
  alert(tiempo);
}
于 2012-05-15T20:54:36.070 回答
2

您可以在 ready 函数中创建一个事件处理程序并直接将其传递，而不是将您的 onytplayerStateChange 函数的字符串引用传递给事件侦听器，如下所示：

function onYouTubePlayerReady(playerId) {
    var youtubeplayer = document.getElementById('youtubeplayer');
    var stateChangeHandler = function (newState) {
        //Make it autoplay on page load
        if (newState == -1) {
            youtubeplayer.playVideo();
        }
        var tiempo = youtubeplayer.getCurrentTime();
        //Rounds to 2 decimals
        var tiempo = Math.round(tiempo*100)/100;
        alert(tiempo);
    };
    youtubeplayer.addEventListener("onStateChange", stateChangeHandler);
    youtubeplayer.setPlaybackQuality('large');
}

甚至直接传入一个匿名函数：

function onYouTubePlayerReady(playerId) {
    var youtubeplayer = document.getElementById('youtubeplayer');
    youtubeplayer.addEventListener("onStateChange", function (newState) {
        //Make it autoplay on page load
        if (newState == -1) {
            youtubeplayer.playVideo();
        }
        var tiempo = youtubeplayer.getCurrentTime();
        //Rounds to 2 decimals
        var tiempo = Math.round(tiempo*100)/100;
        alert(tiempo);
    });
    youtubeplayer.setPlaybackQuality('large');
}

这保留了“onYouTubePlayerReady”函数内的 youtubeplayer 变量的范围，并绕过了建立全局变量的需要。

于 2012-05-15T21:22:29.697 回答