javascript addEventListener在状态更改中不起作用

I have two colorbox popup boxes which show a youtube video in each. When they're finished playing, I'm trying to have them automatically close the colorbox window. This code below works perfect in firefox, but in IE I can't get addEventListener to work. I've tried attachEvent with no success. Can anybody offer any suggestions as to how to solve this? It seems simple but I'm exhausted trying to find a solution. By the way, this is my first time at * and it's very impressive.

我有两个弹出框，每个都有一个youtube视频。当它们结束播放时，我试图让它们自动关闭colorbox窗口。下面的代码在firefox中非常完美，但在IE中我无法让addEventListener工作。我试过了attachEvent，但是没有成功。关于如何解决这个问题，有人能提出建议吗?这看起来很简单，但是我已经绞尽脑汁地想办法了。顺便说一下，这是我第一次来*，非常令人印象深刻。

UPDATE 1:

更新1:

Well, this is my current code. It works perfect in FF, but IE only outputs good. IE8 debugger doesn't report any errors either...

这是我现在的代码。它在FF中是完美的，但只输出好。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');
  }
}

Update 3: Solution

更新3:解决方案

Simply put onComplete in my colorbox and put the swfobject in that and it worked perfectly in IE.

简单地把onComplete放在我的colorbox中，把swfobject放在那个里面，它在IE中完美地工作。

3 个解决方案

#1

from testing in IE it looks like the reference you are using

从IE的测试来看，它看起来就像您正在使用的引用

ytswf = document.getElementById('ytplayer1');

is assigned before the actual swf object is loaded, so IE thinks you are referring to a simple div element

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

you need to run this code

您需要运行此代码

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

right after you call

后你叫

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

before you close out that $(function()

在您关闭$(函数()之前

and place var ytswf; right after the <script> instead of further down

并将var ytswf;就在

#2

IE doesn't support addEventListener does it?? You need attachEvent right?

IE不支持addEventListener，是吗?你需要attachEvent对吧?

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

#3

-1

New answer

新回答

The YouTube player object implements its own addEventListener method which is more like how AS3's syntax. As per the information listed here:

YouTube player对象实现了自己的addEventListener方法，更像是AS3的语法。根据这里列出的信息:

player.addEventListener(event:String, listener:String):Void

的球员。addEventListener(事件:字符串,侦听器:String):空白

YouTube provides an example on the page I linked which I'll provide here:

YouTube在我链接的页面上提供了一个例子，我将在这里提供:

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

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

YouTube also provides an example page that seems to prove out that their example code works in IE. I'll link that example page here.

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

Now, here's an attempt at re-writing the pertinent parts of your code to work as per the examples provided by Google/YouTube:

现在，根据谷歌/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');
}

So, it turns out that the mistake being made here arises from the confusion created by the use of the method name 'addEventListener'. In the W3C JavaScript implementation, the second parameter is a function while in the YouTube implementation, the second parameter is a string. Give this a shot =).

因此，这里出现的错误来自于使用方法名“addEventListener”创建的混淆。在W3C JavaScript实现中，第二个参数是一个函数，而在YouTube实现中，第二个参数是一个字符串。试试这个=)。

#1