我有以下代码,需要使用他们的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”),以便它也可以被其他函数访问?什么在所有浏览器中都有效?
答案 0 :(得分: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);
}
答案 1 :(得分:2)
不是将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变量的范围,并绕过了建立全局变量的需要。