Javascript addEventListener onStateChange 在 IE 中不起作用

Question

我有两个 colorbox 弹出框，每个框都显示一个 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 放入我的 colorbox 中，然后将 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;
就在

Answer 3

新答案

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

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 中运行。我将在此处链接该示例页面。

现在，这里尝试重写代码的相关部分，使其按照 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');
}

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