Кросбраузерна передача даних із Javascript у Flash-ролик
Тиждень тому в одному із моїх проектів виникло завдання змінити існуюче слайд-шоу, реалізоване на JavaScript більш гарним, зробленим на Flash. При мінімальній зміні коду потрібно вставити флеш-ролик і налагодити передачу даних і обробку подій на сторінці так, щоб вона і далі продовжувала працювати коректно.";"
Російськомовні статті на тему передачі даних у зв'язці JavaScript—Flash дають загальне уявлення про процес, але не враховують одну важливу деталь: у різних браузерах потрібно використовувати різні об'єкти для вибору флеш-ролика. Найбільш часто пропоноване рішення працює в Chrome, але відмовляється працювати у Firefox, і тим паче більше в IE.
З огляду на неповноту більшості статей на тему передачі даних між JavaScript і Flash, я вважаю доцільно детальніше розглянути це питання.
Як це працює?
У HTML-сторінки Flash-ролик є звичайним об'єктом, таким як і window, елементи форми або зображення (правда, в Internet Explorer (IE) Flash-об'єкт є COM-об'єктом або об'єктом ActiveX). У залежності від браузеру, на Flash-об'єкт потрібно посилатися різними способами.
window.document[movieName] // (on Mozilla browsers such as Netscape) window[movieName] // (on Internet Explorer as of ver 5) document.embeds[movieName] // Mozilla Netscape, Firefox or Opera
Ось функція, яка повертає Flash-ролик.
function getFlashMovieObject(movieName)
{
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf(""Microsoft Internet"")==-1)
{
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else // if (navigator.appName.indexOf(""Microsoft Internet"")!=-1)
{
return document.getElementById(movieName);
}
}
Більшість сучасних браузерів підтримують використання методу getElementById(movieName). Але якщо це работає в Internet Explorer, то для інших браузерів, таких як Mozilla Firefox або Opera, такий підход не дасть очікуваного ефекту. Причина в тому, що ці браузери повинні використовувати елемент
Для тега <embed>:
— Flash-ролик повинен мати назву, параметр name. Наприклад, у прикладі вище name=""myFlashMovie"".
— тег <embed> повинен містити атрибут swliveconnect=""true"", щоб увімкнути можливість «встановити зв'язок» із JavaScript.
Бажано використовувати однакові значення ID і Name всередині одного Flash-ролика.
UPD:
Хабраюзер pixelcube запропонував таку функцію для отримання флеш-об'єкта:
function getFlash(name) {
return window.document[name] || window[name] || document.embeds[name];
}