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

Бажаєте обговорити матеріал публікації?

Наш Facebook створений спеціально для того, щоб експерти з різних галузей могли обмінюватись думками і відслідковувати оновлення у наших публікаціях.