从函数内部声明全局变量 [英] Declare a global variable from inside a function

问题描述

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

I have the following code, necessary to track an embedded Youtube video in my page using their Javascript API:

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:在IE中不起作用).

(The details related to the Youtube API aren't important, but if you are curious, they are at my previous question Youtube Javascript API: not working in IE).

现在，我的问题是onYoutubePlayerReady()函数声明了"youtubeplayer"，这是对DOM对象的引用，我也需要从其他函数onytplayerstateChange()访问该变量……但是"youtubeplayer"被声明为局部变量.这可以在IE 8，Safari ...中使用，但是在Firefox 12中则无法使用.当然，我可以通过以下方式获得对"youtubeplayer"的引用，而无需使用"var":

Now, my problem is that the onYoutubePlayerReady() function declares "youtubeplayer", which is a reference to a DOM object, and I need to access that variable from the other function onytplayerstateChange() too... but "youtubeplayer" is being declared as a local variable. This works in IE 8, Safari..., but doesn't work in Firefox 12. Of course, I could get a reference to "youtubeplayer" in the following way instead, without the "var":

youtubeplayer = document.getElementById('youtubeplayer');

事实上，这就是它在Youtube的示例代码中的样子，但是，如果我以这种方式编写，则该代码在IE 8中不起作用(尽管它在Firefox 12中有效；有关更多详细信息，请参见我之前的问题).

And in fact, that is how it looks in Youtube's sample code, but if I write it this way, the code doesn't work in IE 8 (while it does work in Firefox 12; see my previous question for more details).

...所有这些使我想到:是否有一种方法可以从函数内部声明全局变量(例如上面的"youtubeplayer")，以便也可以被其他函数访问?在所有浏览器中都能正常工作吗?

...All of which brings me to: is there a way to declare a global variable from inside a function (like "youtubeplayer" above), so that it can be accessed by other functions too? Something that works in all browsers?

推荐答案

声明全局变量的另一种方法是将其创建为全局窗口"对象的额外属性-

Another way to declare globals is to create it as an extra property to the global "window" object-- so do

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

页面上的其他任何内容都应该可以访问此页面.这样您的完整代码将如下所示:

This should be accessible to anything else on the page. So your complete code would look like this;

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);
}

这篇关于从函数内部声明全局变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！