Кроссбраузерный вызов методов Flash из JavaScript

Неделю назад в одном из моих проектов возникла задача заменить существующее слайд-шоу, реализованное на 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>, тогда как getElementById() вернет элемент <object>.

Требования к элементам embed и object

И embed, и object выполняют одно и то же, но большинство людей используют их одновременно, потому что первых распознается только Mozilla (Netscape, Firefox), а второй — только Internet Explorer'ом.

Для того, чтобы наладить связь с JavaScript, далее представлены некоторые требования к тегам object и embed. Во-первых, вот пример того, как Flash-ролик может быть вставлен в html-страницу.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="" id="myFlashMovie" width=481 height=86>
<param name=movie value="flips2.swf">
<embed play=false swliveconnect="true" name="myFlashMovie"
src="flips2.swf" quality=high bgcolor=#FFFFFF
width=481 height=86 type="application/x-shockwave-flash">
</embed >
</object >

В этом примере название и ID ролика «myFlashMovie». (Это название выбирается случайно, на Ваше усмотрение. Желательно использовать одинаковые название и ID, но следует проследить также и за тем, чтобы никакой другой объект не имел такой же ID или Name. Кроме того, используйте только цифры и буквы, название не должно начинаться с цифры). Итак, вот эти требования.

Для тега <object>:
— Flash-ролик обязан иметь ID. Например, в нашем случае id=«myFlashMovie».

Для тега <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];
}