从函数内部声明一个全局变量

Declare a global variable from inside a function

本文关键字：一个 全局变量 函数 内部 声明      更新时间：2023-09-26

我有以下代码，使用他们的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：在IE中不起作用(。

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

youtubeplayer = document.getElementById('youtubeplayer');

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

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

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

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

无需将对 onytplayerStateChange 函数的字符串引用传递给事件侦听器，您可以在 ready 函数中创建事件处理程序并直接传入，如下所示：

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变量的作用域，并绕过了建立全局变量的需要。

相关文章：