Кроссбраузерная передача данных из Javascript во Flash-ролик / Студия Виталия Комлева, разработка веб-сайтов Харьков

Кроссбраузерная передача данных из Javascript во Flash-ролик

Веб-дизайн и аналитика

Передача данных из 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, такой подход не даст ожидаемого эффекта. Причина в том, что эти браузеры должны использовать элемент , тогда как getElementById() вернет элемент .

Требования к элементам 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];
}