Javascript addEventListener onStateChange не работает в IE

У меня есть два всплывающих окна с цветными окнами, в каждом из которых отображается видео на 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.


javascript youtube-api jquery dom-events swfobject
person Community    schedule 21.05.2010    source источник
comment
addEvent должен работать. Можете ли вы показать код того, как вы используете addEvent.   -  person Rajat    schedule 22.05.2010
comment
Я просто сделал ytplayer.attachEvent(onStateChange, onytplayerStateChange); прямо под addEventListener я не ставил условие, решил, что это не имеет значения.   -  person Derek    schedule 22.05.2010
comment
Я обновил свой код с помощью attachEvent в ytvideo2, он работает в FF, но не в IE. Я ДОЛЖЕН заставить это работать в IE. Я тестирую в режиме совместимости с FF, IE8 и IE (IE6?), Не работает ни в одном из IE. Обходной путь был бы в порядке, какие-либо предложения?   -  person Derek    schedule 22.05.2010
comment
Позвольте мне убедиться, что я понимаю, что вы говорите. Запустив код, показанный выше, вы НЕ видите «отличное» предупреждение в IE и не получаете никаких отчетов об ошибках? Когда вы говорите IE, вы имеете в виду отсутствие какой-либо версии IE? Можете ли вы предоставить ссылку на тестовую страницу, чтобы я мог взглянуть? Мне кажется, что если примерная страница, которую я предоставил в своем ответе, работает в IE, вы знаете, что код Google в порядке. Теперь вы должны попытаться выяснить, в чем разница между вашим кодом и кодом Google.   -  person Josh the Goods    schedule 24.05.2010

Ответы (3)


arrow_upward
2
arrow_downward

из тестирования в 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>, а не ниже

person Community    schedule 28.05.2010
comment
Ну, я потратил на это 4 часа только потому, что мне стало любопытно, и, к сожалению, я пришел с пустыми руками. Однако это не attachEvent. Это... цветная коробка. Что-то он делает, что IE не может полностью ссылаться на объект YouTube после рендеринга. Взгляните на исходный код здесь: здесь фиксируются состояния без цветового поля: plain7.com/test. htm и здесь, не иди: plain7.com/test2.htm ... и это только в IE, в других браузерах все правильно. Я сдаюсь :) Уже почти 5 утра, а у меня мозг мертв. Может быть, попробовать какую-нибудь другую реализацию лайтбокса (хотя мне больше всего нравится colorbox) - person hndcrftd; 30.05.2010
comment
ха, теперь вы видите, как я себя чувствовал последние 2 недели... спасибо, что изучили его, я уверен, что смогу найти альтернативу colorbox, которая просто потребует серьезных модификаций. Я собираюсь отметить ваш ответ как правильный просто потому, что теперь я знаю, что проблема не в attachEvent. еще раз спасибо! - person Derek; 30.05.2010
comment
Спасибо за очки, Дерек, хотя я чувствую, что не очень помог. Однако у меня возникла мысль, что, если вы загрузите swfObject ПОСЛЕ того, как вы визуализируете окно colorbox, например, в обратном вызове для colorbox. Я не знаю, какие еще проблемы это может создать, но прежде чем вы начнете переключать лайтбоксы, возможно, стоит попробовать. - person hndcrftd; 31.05.2010

arrow_upward
4
arrow_downward

IE не поддерживает addEventListener не так ли?? Вам нужно attachEvent правильно?

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

arrow_upward
-1
arrow_downward

Новый ответ

Объект проигрывателя 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');
}

Итак, получается, что ошибка здесь возникает из-за путаницы, вызванной использованием имени метода «addEventListener». В реализации W3C JavaScript второй параметр — это функция, а в реализации YouTube — строка. Попробуйте это =).

person Josh the Goods    schedule 21.05.2010
comment
Я изменил onYouTubePlayerReady в своем исходном вопросе, чтобы отразить ваш ответ. В FF выдает 1, в IE выдает 2. FF работает как положено, IE не запускает функцию onytplayerStateChange. Правильно ли я использую attachEventHandler? поможет ли использование функции bind() в моей ситуации? - person Derek; 22.05.2010
comment
Опять же, работает в FF, а не в IE. Возможно, пример поможет вам, ребята, решить мою проблему. - person Derek; 22.05.2010
comment
Дерек, пожалуйста, откройте примерную страницу, на которую я дал ссылку в своем ответе, и скажите, видите ли вы, что события onStateChange отображаются в вашей версии IE. Я тестировал в IE8, и мне показалось, что он отлично работает. Также обратите внимание, что третий параметр в addEventListener необязателен. Попробуйте заменить свой onYouTubePlayerReady на тот, который я предоставил, и отчитайтесь. Вам вообще не нужны операторы ветвления. - person Josh the Goods; 22.05.2010
comment
Я пробовал примерную страницу YouTube в IE8, и состояние проигрывателя работает. По какой-то причине они не позволяют мне использовать представление совместимости на этой странице. Обычно я тестирую и IE6, и IE8, сегодня днем ​​попробую разобраться с этим кодом. Обновленный код выше по-прежнему не даст мне хорошего результата, но я собираюсь много с ним поиграть. Спасибо за вашу помощь, я свяжусь с вами как можно скорее. - person Derek; 22.05.2010
comment
Не могли бы вы взглянуть на мой код в обновлении 1 выше. Это моя попытка вырваться из кода YouTube. - person Derek; 23.05.2010
comment
Это неправильно. AS 3 — это .addEventListener(type:String, func:Function (за которым следуют необязательные аргументы)):void; AS 2 немного отличается (параметр 2 является ссылкой на объект или функцию прослушивателя.), но подпись НЕ является player.addEventListener(event:String, listener:String):Void; -1 - person cwallenpoole; 25.05.2010
comment
Крис, можешь проверить мою тестовую ссылку выше? - person Derek; 25.05.2010