Кросбраузерна передача даних із 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];
}