[Tutorial JS] Detectarea prezentei plug-in-urilor in browser

#1 de BoGdY
Nume Tutorial: Detectarea prezentei plug-in-urilor in browser
Descriere: Detectarea prezentei plug-in-urilor in browser
Download:
Autor: Anonim
Sursa (Link-ul oficial):
tutorialeonline
Propria parere: Folositor.
Tutorialul:

Plug-in-urile pun la dispoziţia programatorului de pagini web o gamă largă de opţiuni ce permit 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: Selectaţi tot

<body>
 <script language="Javascript" type="text/javascript">
 <!--
 if (navigator.plugins["Shockwave Flash"]) {
    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>')
 }
 else {
    document.write("<img src='content/images/test.gif' alt='airport' width='414' height='300' \/>")
 }
 -->
 </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/shoc ... on=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>, precum 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 corect scripturile din JavaScript trebuie scrise corect, în cazul de faţă tot ce este inclus în document.write trebuie să se afle pe un singur 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 înlocuieşte 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: Selectaţi tot

<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 trebui 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 orice versiune a plug-in-ului, scriptul anterior nu ne este de folos. Pentru acest lucru avem nevoie 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: Selectaţi tot

<head>
 <title>Test</title>
 <script language="Javascript" type="text/javascript">
 <!--
 avemQT = false
 for (i=0; i<navigator.plugins.length; i++) {
    if (navigator.plugins[i].name.indexOf("QuickTime") >= 0) {
       avemQT = true
    }
 }
 -->
 </script>
 </head>
 <body>
 <script language="Javascript" type="text/javascript">
 <!--
 if (avemQT) {
    document.write('<embed src="content/images/test.mov" width="100" height="80"><\/embed>')
 }
 else {
    document.write('<img src="content/images/test.jpg" alt="test" width="100" height="80" \/>')
 }
 -->
 </script>
 </body>
După cum observaţi, scriptul este compus 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 oferă numărul total de plug-in-uri instalate. În continuare, operatorul ++ este folosit pentru a incrementa valoarea lui i cu o unitate.

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

Această linie începe cu o instrucţiune condiţională plasată în interiorul buclei. Vectorul navigator.plugins 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.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 începe de la 0, nu de la 1. Primul caracter este situat pe poziţia 0, următorul pe poziţia 1 şi tot aşa. Valoarea reală 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: Selectaţi tot

<body>
 <script language="Javascript" type="text/javascript">
 <!--
 if (navigator.plugins && navigator.plugins.length > 0) {
    document.write('Acest browser are urmatoarele plug-in-uri
    instalate: <table cellspacing="4" cellpadding="4">')
    document.write('<tr><th bgcolor="#CCCCCC">Nume<\/th>
    <th bgcolor="#CCCCCC">Fisier<\/th><th bgcolor="#CCCCCC">Descriere<\/th><\/tr>')
    for (i=0; i<navigator.plugins.length; i++) {
       acestPlugin = navigator.plugins[i]
       document.write('<tr valign="top"><td bgcolor="#CCCCCC">' + acestPlugin.name)
       document.write('<\/td><td bgcolor="#CCCCCC">' + acestPlugin.filename)
       document.write('<\/td><td bgcolor="#CCCCCC">' + acestPlugin.description + '<\/td><\/tr>')
    }
    document.write('<\/table>')
 }
 else {
    document.write('Interpretorul JavaScript nu a gasit nici un plug-in')
 }
 -->
 </script>
 </body>
Utilizarea dublului & (ampersand) indică faptul că ambele 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: Selectaţi tot

 <body>
 <script language="Javascript" type="text/javascript">
 <!--
 if (navigator.plugins && navigator.plugins.length > 0) {
    document.write('Acest browser are urmatoarele plug-in-uri instalate:')    
    for (i=0; i<navigator.plugins.length; i++) {        
       document.write('<br \/>')
       acestPlugin = navigator.plugins[i]
       for (j in acestPlugin) {
          document.write(j + ': ' + acestPlugin[j] + '<br \/>')        
       }
    }
 }
 else {
    document.write('Interpretorul JavaScript nu a gasit nici un plug-in')
 }
 -->
 </script>
 </body>
Similar exemplului anterior, variabila acestPlugin are valoarea plug-in-ului curent, cel pe care îl 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. Deoarece variabila i este deja folosită î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 funcţionează. De ce? Ar trebui să îi întrebaţi direct pe programatorii de la Microsoft...
Scrie răspuns

Înapoi la “Tutoriale JS”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 2 vizitatori