# Hvad er polyfills?

**Polyfills** er kodekomponenter, der gør nyere webfunktioner brugbare i browsere, der ikke understøtter sådanne funktioner som standard. Denne artikel forklarer, hvad disse praktiske **kodekomponenter** er, og hvordan du kan bruge dem.

## Hvad er polyfills, og hvilke sprog kan de skrives i?

En polyfill, også kaldet en Polyfiller, er en kodeblok af varierende kompleksitet, der gør moderne HTML-, CSS- eller JavaScript-funktioner tilgængelige i ældre browsere, der ikke understøtter dem indbygget. De fleste polyfills er skrevet i JavaScript, men andre webprogrammeringssprog kan også danne grundlag for filler-scripts. Nogle af de vigtigste funktioner, som polyfills gør tilgængelige på tværs af forskellige webbrowsere, er HTML5-komponenter som bitmap-baserede canvas-elementer til grafik, diagrammer og animationer.

Note Udtrykket “polyfill” stammer fra det populære britiske mærke Polyfilla, som er et fyldstof til renoverings- og restaureringsarbejde. Webudvikleren Remy Sharp så en passende sammenligning mellem **fyldstoffet** og disse nyttige **workaround-koder**, da formålet med begge er at udfylde huller. Med sidstnævnte er de huller, der skal udfyldes, huller i browserfunktionaliteten. Begrebet blev opfundet i Sharps bog ***Introducing HTML5*** fra 2009, som han skrev sammen med Bruce Lawson. Polyfill etablerede sig efterfølgende som den officielle betegnelse for sådanne kodekomponenter.

## Hvilke typer polyfills findes der?

Det er ikke tilfældigt, at udtrykket polyfill er tæt forbundet med **HTML5**. Med sine avancerede funktioner, der blandt andet har gjort flashvideoer *overflødige*, er den femte version af hypertext markup language blevet en fast del af internettet. **Understøttelsen af HTML5 i browsere** har dog udviklet sig ret langsomt. Ud over de polyfills, der er oprettet til HTML5-elementer, bruges **polyfill-kodeblokke** også til at integrere følgende webelementer:

- **SVG-grafik**: SVG-formatet SVG (**Scalable** **Vector** **Graphics**), som W3C-konsortiet begyndte at anbefale som standardformat for vektorgrafik i 2001, vandt først frem med HTML5. Men fordi mange browsere endnu ikke understøtter dette format, findes der SVG-polyfills såsom [svgweb](https://code.google.com/archive/p/svgweb/ "Google Code Archive: svgweb polyfill").
- **ECMAScript**: ECMAScript er den standardiserede kerne i JavaScript og opdateres regelmæssigt for at udvide sprogets funktionalitet. Funktioner som Promise-objekter eller Symbol-funktioner gøres tilgængelige i ældre browsere gennem polyfills som JavaScript-standardbiblioteket [core-js](https://github.com/zloirock/core-js "JavaScript library core-js GitHub site").
- **Webstorage**: Cookie-alternativer som **lokal storage** (langtidslagring på klientsiden) og **session storage** (lagring begrænset til den aktuelle session), samlet kendt som webstorage eller DOM Storage, understøttes ikke af alle browserversioner. Den MIT-licenserede [webstorage-polyfill](https://github.com/Macil/webstorage-polyfill "webstorage-polyfill on github.com") er en velkendt løsning på dette problem.
- **Cross-Origin Resource Sharing (CORS)**: CORS giver webapplikationer adgang til webressourcer, der er placeret uden for ens egen server. Mange ældre browsere understøtter ikke denne dataudveksling. JavaScript-pakken [XDomain](https://github.com/jpillora/xdomain "github.com: XDomain") og CORS-polyfill [XHook](https://github.com/jpillora/xhook "GitHub index of CORS XHook polyfill") kan hjælpe med at løse dette problem.
- **CSS (Cascading Style Sheets)**: I årevis har CSS været et af de vigtigste værktøjer til at designe det visuelle layout af hjemmesider. Over tid er stylesheets blevet mere alsidige, hvilket har gjort polyfills populære til at kommunikere med ældre browsere. Et af de bedst kendte værktøjer er [css-polyfills.js](https://philschatz.com/css-polyfills.js/ "css-polyfills.js on philschatz.com").
- **Geolokalisering**: I lang tid blev Geolocation API (der bruges til at overføre en brugers placering) ikke understøttet af browsere og kunne kun bruges med hjælp fra et ekstra browser-plugin. Med en polyfill kan du give denne funktionalitet til brugere med ældre browserversioner, der ikke understøtter API’en indbygget.

Note For at forenkle og optimere brugen af polyfills bruger tjenester som Polyfill.io-projektet content delivery networks (CDN’er) til at levere scripts. I begyndelsen af 2024 har der imidlertid været betydelige problemer med **malware, der distribueres via de CDN’er, som Polyfill.io bruger**. Hvis du bruger denne tjeneste, bør du fjerne al kode fra Polyfill.io-projektet fra din hjemmeside.

## Hvordan bruges polyfills? (Inkluderer kodeeksempler)

Du kan direkte indlejre polyfill JavaScript-kode eller polyfill-scripts i HTML-dokumentet på et websted. Disse **integreres problemfrit i den eksisterende kildekode** og udføres kun, hvis browseren ikke understøtter den pågældende webfunktion. Dette gøres typisk ved hjælp af JavaScripts `if` for at kontrollere for manglende understøttelse. Manglen på understøttelse kan derefter omdannes til en betingelse for at aktivere scriptet. I de to følgende eksempler illustrerer vi, hvordan man implementerer dette, og viser dig, hvordan den **generelle struktur af en polyfill** ser ud.

### Eksempel 1: Polyfill til JavaScript-metoden `startsWith()`

```javascript
if (!String.prototype.startsWith) {
    String.prototype.startsWith = function (searchString, position) {
        position = position || 0;
        return this.indexOf(searchString, position) === position;
    };
}
```

Dette lille JavaScript-uddrag gør det muligt for den kaldende browser at bruge `startsWith()`, selvom den ikke understøtter den indbygget. Denne metode, der er en del af ECMAScript 6-specifikationen, kontrollerer, om en **streng begynder med tegnet eller tegnserien fra en anden streng**. Hvis det er tilfældet, returneres ‘true’, ellers returneres ‘false’. Du kan finde en mere kompleks, optimeret version til integration af `startsWith()` på [GitHub-siden tilhørende udvikleren Mathias Bynens](https://github.com/mathiasbynens/String.prototype.startsWith "GitHub page: mathiasbynens").

Note Den her viste kode virker ikke, hvis webklienten blokerer JavaScript eller har deaktiveret scriptsproget i sine indstillinger.

### Eksempel 2: Polyfill til webopbevaring

Denne JavaScript-polyfill er en enkel kodningsløsning, der gør lokal og sessionslagring tilgængelig i ældre browsermodeller.

```javascript
if (typeof window.localStorage === 'undefined' || typeof window.sessionStorage === 'undefined') {
    (function () {
        var data = {};
        var Storage = function (type) {
            function setData() {
                // Implement the logic to set data into storage
                var storageData = JSON.stringify(data);
                document.cookie = type + '=' + storageData + ';path=/';
            }
            function clearData() {
                data = {};
                setData();
            }
            return {
                length: 0,
                clear: function () {
                    clearData();
                    this.length = 0;
                },
                getItem: function (key) {
                    return data[key] === undefined ? null : data[key];
                },
                key: function (i) {
                    var ctr = 0;
                    for (var k in data) {
                        if (ctr == i) return k;
                        ctr++;
                    }
                    return null;
                },
                removeItem: function (key) {
                    delete data[key];
                    this.length--;
                    setData();
                },
                setItem: function (key, value) {
                    data[key] = value + '';
                    this.length++;
                    setData();
                }
            };
        };
        // Set the local and session storage properties inside the window object
        if (typeof window.localStorage === 'undefined') window.localStorage = new Storage('local');
        if (typeof window.sessionStorage === 'undefined') window.sessionStorage = new Storage('session');
    })();
}
```

Ovenstående kode er en IIFE ( **Immediately** **Invoked** **Function** **Expression**). Inden browseren indlæser den, kontrollerer en komm `if` i første kodelinje imidlertid, om klienten understøtter webteknologierne. Hvis det er tilfældet, returnerer `if` en falsk værdi, fordi typerne for lokal og sessionslagring allerede er defineret. Dette resulterer i, at polyfillet kasseres.


This is a markdown version of: [https://www.ionos.com/da-dk/digitalguide/websteder/webudvikling/polyfill/](https://www.ionos.com/da-dk/digitalguide/websteder/webudvikling/polyfill/) for AI/LLM consumption.