Browser detection javascript zonder indexof()

[jee-weetje]

Mensen,

Ik ben bezig met een stukkie scripting, waar ik onderscheid moet maken tussen de verschillende browsers. Ik heb eens rod ge-googled, maar zie voornamelijk de volgende manieren:

code:

    var browserName=navigator.appName; 
      if (browserName=="Netscape")
     { 
         alert("Hi Netscape User!"); 
     }

Ik heb begrepen dan het opvargen van de appName een achterhaalde zaak is omdat sommige browser dit niet meer afstaan.

Ik zie ook wel vaak de volgende manier:
<code>
var IE = (navigator.userAgent.indexOf("MSIE") != -1)
</code>

Nu is mijn vraag of debovenstaande manier (indexOf) wel waterdicht is ?? en zo nee, welke manier valt dan aan te bevelen?

ik heb hier ( http://www.quirksmode.org/js/detect.html ) al een beetje info opgedaan.

bvd,

[ Voor 2% gewijzigd door Pelle op 05-11-2004 10:43 . Reden: [ code] :z ]

[crisp]

Wat wil je er mee doen? Voor bijna alle scripting zaken is browser-sniffing tegenwoordig overbodig, ja kan beter 'support-sniffing' toepassen. userAgent is ook onbetrouwbaar want kan ook gespoofed of onderdrukt worden; daarbij is er tegenwoordig dusdanig veel software op de markt waarmee webpagina's bezocht kunnen worden, met elk een eigen userAgent string, dat het ook bijna een ondoenlijke zaak is om op die manier een 100% correcte identificatie te doen.

[André]

En zou je in het vervolg ipv <code> [code] willen gebruiken

En zoals crisp al zegt, wat wil je er mee?

[jee-weetje]

Ik probeer met innerHTML een <tr> aan een bestaande tabel toe te voegen, zoals je misschien wete kan dat met de volgende code:

index is mijn variabele om de rij een id te geven.

code:

var tr = document.createElement("tr"); 
tr.id='row_id'+index;
  td = document.createElement("td");
  td.innerHTML= index;

tr.appendChild(td);
  td = document.createElement("td");
  td.innerHTML=array_info[index][0];

  <td>'s invoegen , bla, bla,

var my_table =  document.getElementById('my_table'); 

if browser = IE
{    my_table.children(0).appendChild(tr); }

else{ my_table.appendChild(tr); }

Dit laatste is natuurlijk fictief, maar daar komt het op neer. Als het IE is dan moet het stuk met "children(0)"erbij in. Dat schijnt te maken te hebben met <tbody>.

als ik IE gebruik de code hierbovan uit de IF, dan werkt het.
Als ik firefox gebruik en code hierbovenin in de ELSE neer, dan werkt dat.
dus de code is goed !!

alleen de detectie ontbreekt

bvd.

[ Voor 8% gewijzigd door Pelle op 05-11-2004 10:43 . Reden: Kijk nou eens wat André zegt :z ]

[jee-weetje]

sorry pelle, je was me te snel af. Ik was net mijn tweede bericht aant typen toen andré poste !

[crisp]

Kan je niet zoiets doen:

JavaScript:

var my_table =  document.getElementById('my_table');
if (myTable.firstChild && myTable.firstChild.tagName.toLowerCase() == 'tbody')
  my_Table = my_Table.firstChild;
my_table.appendChild(tr);

ook hier geldt: kijk gewoon of er een tbody is of niet; browserdetectie is dus totaal overbodig en foutgevoeliger.

Element.children(x) is overigens ook IE-only; de juiste DOM methode is element.childNodes.item(x), en naar ik meen zou in FF ook altijd een tbody in de DOM-tree moeten staan.

Als je puur tekst in je aangemaakte cellen wil zetten zou ik ook geen innerHTML gebruiken, maar een textNode appenden.

[ Voor 83% gewijzigd door crisp op 05-11-2004 11:11 ]

[jee-weetje]

helaas,

Als ik de code zo rechtsreeks overneem werkt het nog alleen bij IE en niet bij firefox.

Ik ga ondertussen eens uitzoeken wat het werkelijke verschil is tussen het wel en niet gebruik van "children(0)".

Tot dusver thanx !

[Verwijderd]

crisp schreef op 05 november 2004 @ 11:02:

Element.children(x) is overigens ook IE-only; de juiste DOM methode is element.childNodes.item(x), en naar ik meen zou in FF ook altijd een tbody in de DOM-tree moeten staan.

Volgens mij niet, maar voegt FF het automatisch toe.

[crisp]

Verwijderd schreef op 05 november 2004 @ 11:11:
[...]


Volgens mij niet, maar voegt FF het automatisch toe.

Alle browsers voegen impliciet een tbody element toe:

JavaScript:

function addrow()
{
    var tr = document.createElement('tr'); 
    var td = document.createElement('td');
    td.appendChild(document.createTextNode('woei'));
    tr.appendChild(td);

    td = document.createElement('td');
    td.appendChild(document.createTextNode('meukee'));
    tr.appendChild(td);

    var my_table = document.getElementById('my_table').firstChild; 
    while (my_table.nodeType != 1 || my_table.tagName.toLowerCase() != 'tbody')
        my_table = my_table.nextSibling;

    my_table.appendChild(tr);
}

alleen vind FF het blijkbaar niet erg als je een tr toevoeg aan het table-element zelf, buiten de tbody.

De while is omdat FF ook whitespace tussen de elementen meeneemt in de DOM-tree.

[ Voor 9% gewijzigd door crisp op 05-11-2004 11:28 ]

[jee-weetje]

Ik ben er gedeeltelijk uit !!

De javascriptconsole van FF gaf aan dat het object van "my_table.firstChild.tagName.toLowerCase() " geen properties had.

Nu maak ik sowiezo geen tbody aan, dus zal IE dat wel fijn regelen !?

Ik heb de code dus een beetje aangepast en het volgende werkt zowel bij IE als bij FF:

code:

my_table.firstChild && my_table.firstChild.tagName == 'TBODY')

Omdat ik mijn tbody niet zelf creeër voorzie ik verder geen problemen als ik het zo doe!

code:

// de rest van de bovenstaande code heb ik niet hoeven wijzigen thanx to you !!
 
var my_table=  document.getElementById("my_table");

 if (my_table.firstChild && my_table.firstChild.tagName == 'TBODY')
 {
      // IE   
      my_table= my_table.firstChild;
      my_table.appendChild(tr);
 }

else
{
      // FF
      my_table.appendChild(tr);
}

thanx !!

[ Voor 29% gewijzigd door jee-weetje op 05-11-2004 11:45 ]

[crisp]

Mijn voorbeeld hierboven is toch beter; FF heeft wel degelijk een tbody in de tree staan, alleen is je firstChild waarschijnlijk whitespace.
Verder zou ik toch expliciet de tagName naar een bepaalde case omzetten; bij het gebruik van XHTML geeft FF namelijk tagNames in lowercase terug.

[jee-weetje]

Kan ik in een textnode ook een <a href> plaatsen ??

code:

td.appendChild(document.createTextNode(<a href=\"javascript:do_this('+arr_info[row_id][0]+')\">klik</a>));

[crisp]

jee-weetje schreef op 05 november 2004 @ 12:07:
Kan ik in een textnode ook een plaatsen ??
[...]

Nee, natuurlijk niet Een textNode kan alleen text bevatten. Als je HTML wilt toevoegen zal je of netjes al die elementen ook moeten aanmaken en appenden, of toch met innerHTML moeten werken.
De opmerking over textNodes was omdat ik heel vaak zie dat mensen innerHTML gebruiken om enkel platte tekst aan een element toe te voegen. Daarvoor is createTextNode veel geschikter, en ook nog eens sneller.

[jee-weetje]

Daar was ik al bang voor ! ben nog niet zo into the javascipt !

ik knooi nog even vandaan !

Bedankt voor de goeie info

[Cyphax]

jee-weetje schreef op 05 november 2004 @ 12:13:
Daar was ik al bang voor ! ben nog niet zo into the javascipt !

ik knooi nog even vandaan !

Bedankt voor de goeie info

Als je dan bezig gaat me een anchor object maken kun je daar weer een textnode in plaatsen...
Je krijgt heel veel code op deze manier, maar het is wel correct.