Javascript addEventListener onStateChange 在 IE 中不起作用

Question

我有两个颜色框弹出框，每个框都显示一个 YouTube 视频。当他们完成播放时，我试图让他们自动关闭彩盒窗口。下面的代码在 Firefox 中完美运行，但在 IE 中我无法让 addEventListener 工作。我试过attachEvent 没有成功。任何人都可以就如何解决这个问题提供任何建议吗？这看起来很简单，但我已经筋疲力尽地试图找到解决方案。

更新 1：

嗯，这是我当前的代码。它在 Firefox 中完美运行，但 IE 仅输出良好。 IE8 调试器也不报任何错误...

function onYouTubePlayerReady(playerId) {
  if (playerId && playerId != 'undefined') {
    if(playerId && playerId == 'ytvideo1'){
      var ytswf = document.getElementById('ytplayer1');
      alert('good');
    } else if(playerId && playerId == 'ytvideo2'){
      var ytswf = document.getElementById('ytplayer2');
    } else {
    }

    setInterval('', 1000);
    ytswf.addEventListener('onStateChange', 'onytplayerStateChange');
    alert('great');
  }
}


function onytplayerStateChange(newState) {
  alert('amazing');
  if(newState == 0){
    $.fn.colorbox.close();
    alert('perfect');
  }
}

更新 3：解决方案

只需将 onComplete 放入我的颜色框中，然后将 swfobject 放入其中即可在 IE 中完美运行。

Answer 1

IE 不支持addEventListener 是吗？你需要attachEvent 对吗？

if (el.addEventListener){   
    el.addEventListener('click', modifyText, false);    
else if (el.attachEvent){   
    el.attachEvent('onclick', modifyText);   
}

Answer 2

从 IE 中的测试来看，它看起来像您正在使用的参考

ytswf = document.getElementById('ytplayer1');

在加载实际 swf 对象之前分配，因此 IE 认为您指的是简单的 div 元素

你需要运行这段代码

function onYouTubePlayerReady(playerId) {
  ytswf = document.getElementById("ytplayer1");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

在你打电话后

swfobject.embedSWF("http://www.youtube.com/v/SPWU-EiulRY?
hl=en_US&hd=0&rel=0&fs=1&autoplay=1&enablejsapi=1&playerapiid=ytvideo1",
"popupVideoContainer1", "853", "505", "8", null, null, params, atts);

在你关闭$(function()之前

并放置var ytswf; 在<script> 之后 而不是进一步向下

Answer 3

新答案

YouTube 播放器对象实现了自己的 addEventListener 方法，这更像是 AS3 的语法。根据here列出的信息：

player.addEventListener(事件:字符串, 监听器：字符串）：无效

YouTube 在我链接的页面上提供了一个示例，我将在此处提供：

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
   alert("Player's new state: " + newState);
}

YouTube 还提供了一个示例页面，似乎证明他们的示例代码在 IE 中有效。我将链接该示例页面here。

现在，尝试重写代码的相关部分，以按照 Google/YouTube 提供的示例工作：

function onYouTubePlayerReady(playerId) {
  if(playerId && playerId == 'ytvideo1'){
    var ytplayer = document.getElementById('ytplayer1');
  } else if(playerId && playerId == 'ytvideo2'){
    var ytplayer = document.getElementById("ytplayer2");
  } else {
    return;
  }

  ytplayer.addEventListener('onStateChange', 'onytplayerStateChange');
}

因此，事实证明这里所犯的错误是由于使用方法名称“addEventListener”而造成的混乱。在 W3C JavaScript 实现中，第二个参数是一个函数，而在 YouTube 实现中，第二个参数是一个字符串。试一试 =)。