6. Detectarea prezenţei plug-in-urilor în browser

Detectarea prezenţei plug-in-urilor în browser

Plug-in-urile pun la dispoziţia programatorului de pagini web o gamă largă de opţiuni ce încuviințează includerea de conţinut media cum ar fi sunete, filme şi animaţie. Problema care apare cu aceste plug-in-uri este că nu putem fi siguri dacă utilizatorul are instalat un anumit plug-in de care aveţi nevoie pentru a rula o melodie de exemplu. JavaScript vă poate ajuta în această privinţă verificând lista de plug-in-uri instalate pe calculatorul utilizatorului şi în cazul în care nu este instalat un anumit plug-in se poate redirecta automat pagina către plug-in-ul respectiv. Scriptul de mai jos testează prezenţa unuia dintre cele mai folosite plug-in-uri, Flash Player:

Cod:

<body>
<script language="Javascript" type="text/javascript">

</script>
</body>

Să explic puţin în continuare ce se întâmplă în codul menţionat mai sus.

if (navigator.plugins["Shockwave Flash"])
{

În acest caz se verifică dacă în vectorul navigator.plugins este conţinut numele "Shockwave Flash"; în caz afirmativ, testul returnează TRUE. Dacă numele comparat diferă oricât de puţin, testul va returna FALSE

document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100" height="80" id="test" align="middle"><param name="allowScriptAccess" value="sameDomain" \/><param name="movie" value="content\/images\/test.swf" \/><param name="loop" value="false" \/><param name="quality" value="high" \/><param name="bgcolor" value="#ffffff" \/><embed src="content\/images\/test.swf" loop="false" quality="high" bgcolor="#ffffff" width="100" height="80" name="test" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" \/><\/object>')
}

În cazul în care verificarea returnează TRUE, scriptul scrie o bucată de cod HTML în fereastra document. Pentru acest tip de fişier sunt necesari toţi parametrii tagului <object>, ca de exemplu classid, codebase şi param. Parametrul value cuprinde numele fişierului şi este content/images/test.swf. Pentru introducerea de filme Flash în pagina web se folosesc tag-urile <embed>şi <object>

Atenţie!
Cum am mai specificat şi în alte tutoriale, pentru a rula perfect scripturile din JavaScript trebuie scrise corect, în cazul de faţă tot ce este inclus in document.write trebuie să se afle pe un solitar rând altfel nu va funcţiona scriptul.

else
{
document.write("<img src='content\/images\/test.gif' alt='airport' width='414' height='300' \/>")
}

În cazul în care verificarea va returna FALSE se înlocuieste filmul Flash cu o imagine.

Este bine să luaţi în considerare şi posibilitatea ca utilizatorul să aibă dezactivat JavaScript şi în acest caz să afişati totuşi imaginea prin adăugarea codului de mai jos:

Cod:

<noscript>
<img src='content/images/test.gif' alt='airport' width='100' height='80' />
</noscript>

Atenţie!
Acest script caută un plug-in în funcţie de numele său. Dacă numele se modifică, va necesită să modificaţi scriptul astfel încât căutarea să se facă după noul nume.

Probabil aţi observat că în interiorul scriptului tagul de închidere se termină cu secvenţa \/> în loc de secvenţa normală />
Motivul este faptul că JavaScript trebuie împiedicat să creadă că încercăm să închidem tagul <script>. Plasând un simbol backslash înaintea slash-ului spunem interpretorului JavaScript să ignore caracterul care urmează, acţiune cunoscută formal drept eludarea caracterului.

Utilizatea unei bucle pentru a verifica prezenţa plug-in-urilor

În exemplul anterior se verifica prezenţa unui anumit plug-in. Dacă însă dorim să căutăm indiferent ce versiune a plug-in-ului, scriptul anterior nu ne este de folos. Pentru acest lucru avem necesitate de o structură repetitivă, care să ne permită efectuarea unei acţiuni de un număr specificat de ori. O astfel de structură repetitivă este "for". Acest tip de buclă foloseşte un contor, care este o variabilă ce are o valoare iniţială (de obicei 0) şi se termină o dată cu satisfacerea unui test condiţional din interiorul structurii. Scriptul de mai jos arată cum e construită o asemenea structură repetitivă pentru a verifica dacă printre plug-in-urile browserului se află Apple QuickTime.

Cod:

<head>
<title>Test</title>
<script language="Javascript" type="text/javascript">

</script>
</head>
<body>
<script language="Javascript" type="text/javascript">

</script>
</body>

După cum observaţi, scriptul este format din două părţi, o parte în secţiunea <head> şi unul în corpul paginii. Scriptul din <head> verifică prezenţa plug-in-ului QuickTime, în timp ce partea din secţiunea <body> afişează în browser în funcţie de rezultat, un filmuleţ de tip mov sau o poză jpg.
Să încerc în continuare să vă explic ce se întâmplă prin script.

avemQT = false

Se iniţializează o variabilă de tip boolean sau logică, pe nume avemQT. O variabilă booleană poate lua exclusiv una dintre valorile adevarat (true) sau fals (false).

for (i=0; i<navigator.plugins.length; i++)
{

Aceasta este linia de început a structurii repetitive. Variabila i este folosită pe post de contor cu valoarea iniţială 0. Delimitarea cu punct şi virgulă denotă prezenţa unei alte instrucţiuni pe aceeaşi linie. În continuare, dacă i este mai mic decât numărul de plug-in-uri, se incrementează i cu 1. Obiectul navigator.plugins.length ne asigură numărul întreg de plug-in-uri instalate. În continuare, operatorul ++ este întrebuințat pentru a incrementa valoarea lui i cu o unitate.

if (navigator.plugins[i].name.indexOf("QuickTime") >= 0)
{

Această linie începe cu o instrucţiune condiţională plasată în interiorul buclei. Vectorul navigator.plugins[i] foloseşte parantezele drepte pentru a indica faptul că testul se adresează plug-in-ului aflat în poziţia i. Metoda indexOf() întoarce poziţia la care şirul de caractere "QuickTime" a fost identificat (în cazul în care este identificat) în navigator.plugins[i].name Dacă şirul de caractere nu a fost găsit, valoarea returnată este -1. Dacă el este însă prezent, valoarea returnată este poziţia la care începe şirul.

Atenţie!
În JavaScript, numărătoarea se pornește de la 0, nu de la 1. Debutantul caracter este situat pe poziţia 0, următorul pe poziţia 1 şi tot asa. Valoarea veritabilă poate fi obţinută efectiv numai prin verificarea valorii atributului length (lungime). Toate celelalte metode de lucru cu şirurile de caractere sunt bazate pe numărătoarea pornind de la 0.

avemQT = true

Dacă testul este satisfăcut, variabila avemQT ia valoarea "adevărat".
În continuare, în secţiunea <body> se găseşte condiţia

if (avemQT)
{

Care se traduce astfel:
Dacă variabila avemQT are valoarea true, execută linia următoare dintre acolade, respectiv

document.write('<embed src="content/images/test.mov" width="100" height="80"><\/embed>")
}

Linie care de fapt afişează filmul în browser. Mai departe, linia

else
{
document.write('<img src="content/images/test.jpg" alt="test" width="100" height="80" \/>')
}

Se traduce astfel:
Dacă testul nu este trecut (false), atunci se afişează în locul filmului o poză.

Să zicem că în continuare dorim să afişăm în browser toate plug-in-urile instalate în browser. Pentru aceasta folosim codul următor:

Cod:

<body>
<script language="Javascript" type="text/javascript">

</script>
</body>

Utilizarea dublului & (ampersand) indică faptul că cele două valori trebuie să fie adevărate pentru a se trece la execuţia codului.

Exemplul arătat mai sus implică cunoaşterea anterioară a numelui obiectelor pe care urmează să le afişăm. Uneori, acest lucru nu este posibil, şi pentru asta putem utiliza un tip de structură repetitivă for/in pentru a afişa toate proprietăţile obiectelor, indiferent de tipul acestora. Bucla for/in enumeră toate proprietăţile unui obiect specificat.

Cod:

<body>
<script language="Javascript" type="text/javascript">

</script>
</body>

Similar exemplului anterior, variabila acestPlugin are valoarea plug-in-ului curent, cel pe care il procesăm în momentul respectiv. În loc să scriem, de exemplu, acestPlugin.filename, folosim o buclă de tipul for/in pentru a parcurge toate proprietăţile obiectului acestPlugin. Căci variabila i este deja uzitată în bucla exterioară, se foloseşte variabila j, care la fiecare trecere prin buclă ia valoarea numelui următoarei proprietăţi a obiectului acestPlugin. Este important să vedeţi că j nu conţine un număr, spre deosebire de i, este un şir de caractere, deşi îndeplineşte rolul de variabilă contor.

Atenţie!
Este important să ştiţi că aceste scripturi nu funcţionează pe Internet Explorer din Windows din cauza părţii de cod responsabilă de lucrul cu plug-in-urile, aceasta nefiind "înţeleasă" de browser. Internet Explorer include obiectul plug-in, doar că acesta este lipsit de conţinut. În schimb pe Internet explorer de pe Mac funţionează. De ce? Ar trebui să îi întrebaţi direct pe programatorii de la Microsoft...