Bar: 1 version importeret

2022-10-26T04:45:11Z

1 version importeret

← Ældre version	Versionen fra 26. okt. 2022, 06:45
(Ingen forskel)

htx_>Bar: /* Detektering i javaScript */

2013-05-01T19:52:45Z

Detektering i javaScript

Ny side

For at detektere hvilken browsertype man har åbnet dokumentet i, kan man anvende '''betingede kommentarer''' der er en speciel type [[HTML Kommentar]] Der kan tolkes af Microsoft [[Internet Explorer]] i [[HTML]] koden. Betingede kommentarer kan anvendes til at lave specielle koder til Internet Explorer, samt til at skjule koder på Internet Explorer. Dette er specielt anvendeligt til [[CSS]], hvor man sagtens kan komme ud for at skulle anvende to forskellige style-sheets.

De betingede kommetarer dukkede op første gang i Internet Explorer 5 og virker helt frem til Internet Explorer 9 <ref name="MS1">[http://msdn2.microsoft.com/en-us/library/ms537512.aspx About Conditional Comments] fra Microsoft Corporation</ref> I internet Explorer 10 fortsættes ikke supporten med versions-detektering, men den generelle brug af teknikken kan stadig anvendes og tolkes korrekt<ref>[http://blogs.msdn.com/b/ie/archive/2011/07/06/html5-parsing-in-ie10.aspx Microsoft - HTML5 fortolkning i IE10]</ref>.

Der er også mulighed for at detektere browseren ved hjælp af [[javaScript]], men det kræver lige at man har lidt programmerings-kendskab.
==Eksempler i HTML==
Her er et simpelt eksempel som illustrerer hvordan de betingende kommentarer fungerer.

<source lang="html4strict">


<p>You are not using Internet Explorer.</p>

</source>

=== Syntaks i HTML ===
Der er to typer "betingede kommentarer", hvor forskellen er om de bliver vist i browsere der ikke understøtter betingede kommentarer eller om de bliver skjult af kommentarfeltet. Disse to typer kaldes downlevel-revealed og downlevel-hidden

Den grundlæggende syntaks er vist i den efterfølgende tabel
{| class="wikitable"
! Kommentar type
! Syntaks eller mulig værdi
|-
| standard HTML kommentar
| 
|-
| downlevel-hidden
| 
|-
| downlevel-revealed
| <![if ''expression'']> ''HTML'' <![endif]>
|}

Det ''HTML'' der vises herover i hver af de betingede kommentarblokke kan være hvilket som helst HTML indhold, også scripts som javascript. Begge typer betingede kommentarer anvender en ''expression'' eller på dansk en betingelse, som er den betingelse der gør om det der er sat inden i kommentarblokke skal vises/udføres eller om det skal ignoreres. Betingelsen kan udformes som bare en enkelt betingelse, eller som en kombination af flere betingelse, der bliver kombineret logisk med AND og OR, som det er vist i den følgende tabel:

{| class="wikitable"
! Del
! Eksempel
! Kommentar
|-
| IE
| [if IE]
| Der kan testes bare på denne måde, for at se om det er Internet Explorer eller man kan kombinere det videre for at se hvilken version af Internet Explorer det er.
|-
| value
| [if IE 7]
| På denne måde kan man teste hvilken version af Internet Explorer det er. Man kan både teste hoved version 5, 6, 7 osv. men man kan også teste om det f.x. er version 5.5 altså en underversion.
|-
| WindowsEdition
| [if WindowsEdition]
| Internet Explorer 8 på Windows 7. Kan angive noget om hvilken "WindowsEdition" det er.
|-
| value
| [if WindowsEdition 1]
| Igen hvilken præcis version af windows (nærmere betydning ikke analyseret).
|-
| true
| [if true]
| Giver sandt - betingelsen er altid opfyldt.
|-
| false
| [if false]
| Giver falsk - betingelsen er aldrig opfyldt.
|}

Efterfølgende tabel viser hvordan man kan bruge operatorer i kombinationer for at skabe betingelserne.

{| class="wikitable"
! Del
! Eksempel
! Kommentar
|-
|
| [if !IE]
| En NOT operator. Placeres lige umiddelbart før den betingelse man vil arbejde med. Betyder at betingelsen får den modsatte betydning.
|-
| lt
| [if lt IE 5.5]
| Mindre end operator. Betingelsen bliver sand, hvis det testede er mindre end det angivne.
|-
| lte
| [if lte IE 6]
| Mindre end eller lig med operator. Betingelsen bliver sand, hvis det testede er mindre end eller lig med det angivne.
|-
| gt
| [if gt IE 5]
| Større end operator. Betingelsen bliver sand, hvis det testede er lig med det angivne.
|-
| gte
| [if gte IE 7]
| Større end eller lig med operator. Betingelsen bliver sand, hvis det testede er større end eller lig med det angivne.
|-
| ( )
| [if !(IE 7)]
| Deludtryk. Deludtryk kan anvendes sammen med logiske operatorer, og at skabe en betingelse.
|-
| &
| [if (gt IE 5)&(lt IE 7)]
| AND operator. Giver sandt, hvis alle deludtryk er sande
|-
| |
| [if (IE 6)|(IE 7)]
| OR operator. Giver sandt, hvis bare et deludtryk er sandt
|}

===Anvendelse til at have forskellig CSS===
Her er en simpel måde til at have forskellig CSS i Internet Explorer og i alle andre browsere.

<source lang="html4strict">


<link href="non-ie-style.css" rel="stylesheet">

</source>

==Detektering i javaScript==
En måde at detektere på i javaScript er ved at kigge på navigator objektet som eksemplet her fra w3schools<ref>[http://www.w3schools.com/js/js_window_navigator.asp w3Schools om navigator objektet i javaScript]</ref>:

<source lang="html4strict">
<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>
</source>

Der er dog taget det forbehold at brugeren kan ændre i objektet og detekteringen ikke kan sikre opførslen i nye versioner og styresystemer. Man kan derfor lave detekteringen ud fra specielle objekter i de enkelte browsere som f.x.:

<source lang="html4strict">
<script>
if (window.opera) {...some action...}
</script>
</source>

===Anvendelse af specielle objekter i javascript===
Denne metode skulle være den bedste, da man tester på om objekter der er unikke for de enkelte browsere er til stede. Dette skulle være den mest valide test.

Der er dog stadig problemet med at browsere udvikler sig. Derfor kan nye versioner af browsere pludselig kommetil at optræde som en anden type, hvis en anden type har fået defineret et objekt i en ny version, der ellers har været unik for en browser-type.

Eksemplet her skulle gerne illustrere hvordan de fleste gængse browsere kan identificeres:
<source lang="javascript">
if (document.all) {
document.write('Internet Explorer - document.all<br />');
}
if (/*@cc_on!@*/false) {
document.write('Internet Explorer mindst vers 6 - document.all<br />');
}
if (window.globalStorage) { // Denne burde virke på firefox - men det fungerer ikke i version 19.0
document.write('Firefox - window.globalStorage<br />');
}
if (window.getComputedStyle && !!!window.chrome & !window.opera) { // Her mangler test på Safari
document.write('Firefox - window.getComputedStyle<br />');
}
if (window.opera) { // ikke testet
document.write('Opera - window.opera<br />');
}
if (!!window.chrome) {
document.write('Google Chrome - window.chrome<br />');
}
if (window.HTMLElementConstructor) { // ikke testet
document.write('Safari - window.HTMLElementConstructor<br />');
}
</source>

===Eksempel der anvender navigator objektet===
Dette eksempel stammer fra stackoverflow.com<ref>[http://stackoverflow.com/questions/2400935/browser-detection-in-javascript stackoverflow.com der viser browser detektering]</ref> og det kan skrive ud hvilken browser man arbejder i, ud fra navigator objektet.

<source lang="javascript">
//Copy and paste this into your code/text editor, and try it

//Before you use this to fix compatability bugs, it's best to try inform the browser provider that you have found a bug and there latest browser may not be up to date with the current web standards

//Since none of the browsers use the browser identification system properly you need to do something a bit like this

//Write browser identification
document.write(navigator.userAgent + "<br>")

//Detect browser and write the corresponding name
if (navigator.userAgent.search("MSIE") >= 0){
document.write('"MS Internet Explorer ');
var position = navigator.userAgent.search("MSIE") + 5;
var end = navigator.userAgent.search("; Windows");
var version = navigator.userAgent.substring(position,end);
document.write(version + '"');
}
else if (navigator.userAgent.search("Chrome") >= 0){
document.write('"Google Chrome ');// For some reason in the browser identification Chrome contains the word "Safari" so when detecting for Safari you need to include Not Chrome
var position = navigator.userAgent.search("Chrome") + 7;
var end = navigator.userAgent.search(" Safari");
var version = navigator.userAgent.substring(position,end);
document.write(version + '"');
}
else if (navigator.userAgent.search("Firefox") >= 0){
document.write('"Mozilla Firefox ');
var position = navigator.userAgent.search("Firefox") + 8;
var version = navigator.userAgent.substring(position);
document.write(version + '"');
}
else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0){//<< Here
document.write('"Apple Safari ');
var position = navigator.userAgent.search("Version") + 8;
var end = navigator.userAgent.search(" Safari");
var version = navigator.userAgent.substring(position,end);
document.write(version + '"');
}
else if (navigator.userAgent.search("Opera") >= 0){
document.write('"Opera ');
var position = navigator.userAgent.search("Version") + 8;
var version = navigator.userAgent.substring(position);
document.write(version + '"');
}
else{
document.write('"Other"');
}

//Use w3schools research the `search()` method as other methods are availible
</source>

===Mere avanceret metode===
På [http://www.quirksmode.org/js/detect.html] er der gennemgået hvordan man kan lave en mere objektorienteret måde at detektere browser på, hvor der er en god forklaring til hvad der sker.

==Referencer==
<references />
{{webdesign}}
[[Kategori:HTML]]

Browser detektering - Versionshistorie

Bar: 1 version importeret

htx_>Bar: /* Detektering i javaScript */