Javascript addEventListener onStateChange 在 IE 中不起作用

Posted 2023-02-16

【中文标题】Javascript addEventListener onStateChange 在 IE 中不起作用

【英文标题】：Javascript addEventListener onStateChange not working in IE

【发布时间】：2011-02-22 13:14:18

【问题描述】：

我有两个颜色框弹出框，每个框都显示一个 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 中完美运行。

【问题讨论】：

addEvent 应该可以工作。你能展示一下你是如何使用 addEvent 的代码吗？

我只是做了 ytplayer.attachEvent("onStateChange", onytplayerStateChange);就在addEventListener下面，我没有设置条件，觉得没关系。

我在 ytvideo2 中使用 attachEvent 更新了我的代码，它适用于 FF，但不适用于 IE。我必须让它在 IE 中工作。我在 FF、IE8 和 IE 兼容模式（IE6？）下进行测试，在这两个 IE 上都不起作用。一个解决方法就可以了，有什么建议吗？

让我确定我明白你在说什么。运行上面显示的代码，您在 IE 中看不到“很棒”的警报，也没有收到任何错误报告？当您说 IE 时，您的意思是没有任何版本的 IE？你能提供一个测试页面的链接，以便我看一下吗？在我看来，如果我在答案中提供的示例页面在 IE 中有效，那么您就知道 Google 代码没问题。您现在应该尝试弄清楚您的代码与 Google 的代码有何不同。

【参考方案1】：

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

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

【参考方案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> 之后 而不是进一步向下

【讨论】：

好吧，我花了 4 个小时来研究它，只是因为它让我感到好奇，不幸的是，我空手而归。然而，它不是 attachEvent。这是...彩盒。它所做的事情是 IE 在渲染后无法完全引用 YouTube 对象。看看这里的源代码：这里的状态是在没有颜色框的情况下被捕获的：plain7.com/test.htm 和这里，不行：plain7.com/test2.htm ...这仅在 IE 中，其他浏览器正确。我放弃了 :) 现在快凌晨 5 点了，我脑残了。可能会尝试其他一些灯箱实现（尽管颜色箱也是我的最爱）

哈，现在你知道我过去两周的感受了...感谢您的调查，我确信我可以找到 colorbox 的替代品，只需要进行一些认真的修改.我将您的答案标记为正确，因为现在我知道 attachEvent 不是问题。再次感谢！

谢谢你的分数，Derek，尽管我觉得我并没有多大帮助。不过我有一个想法，如果在渲染颜色框窗口之后加载 swfObject 会怎样，比如在颜色框的回调中。我不知道它可能会产生什么其他问题，但在您切换灯箱之前，可能值得一试。

【参考方案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 实现中，第二个参数是一个字符串。试一试 =)。

【讨论】：

我更改了原始问题中的 onYouTubePlayerReady 以反映您的回答。在 FF 中它会提示 1，在 IE 中会提示 2。FF 按预期工作，IE 不会运行 onytplayerStateChange 函数。我正确使用 attachEventHandler 吗？使用 bind() 函数对我的情况有帮助吗？

同样，在 FF 中工作，而不是 IE。也许一个例子可以帮助你们解决我的问题。

Derek，请打开我在回答中链接的示例页面，并告诉我您是否在您的 IE 版本中看到 onStateChange 事件。我已经在 IE8 中进行了测试，它似乎对我来说工作得很好。另外，请注意 addEventListener 中不需要第三个参数。尝试用我提供的替换您的 onYouTubePlayerReady，然后报告。您根本不需要分支语句。

我已经在 IE8 中尝试了 youtube 示例页面，并且播放器状态确实有效。出于某种原因，他们不允许我在该页面上使用兼容性视图。我通常测试IE6和IE8，今天下午我将尝试找出这段代码。上面更新的代码仍然不会给我一个好的结果，但我会经常使用它。感谢您的帮助，我会尽快回复您。

你能看看我上面更新 1 中的代码吗？这是我试图摆脱 youtube 代码的尝试。