Meta tags:
description=JavaScript Fullscreen API erklärt: Vollbild aktivieren/beenden, fullscreenchange-Events, häufige Fallstricke und Browserunterstützung mit Beispielen.;

Headings (most frequently used words):

javascript, fullscreen, api, in, vollbildmodus, einführung, die, aktivieren, beenden, vollbildänderungen, mit, events, behandeln, ein, vollständiges, beispiel, kompatibilität, und, browserunterstützung, fazit, übungen, navigations, ui, steuern, häufige, fallstricke,

Text of the page (most frequently used words):
und (65), die (44), document (37), api (36), #fullscreen (31), der (28), das (26), element (25), javascript (22), vollbildmodus (22), ein (21), dom (21), den (19), button (19), auf (17), event (16), browser (16), lernen (15), events (13), function (13), ist (13), div (13), oder (12), wird (12), exit (12), methoden (11), exitfullscreen (11), man (11), requestfullscreen (11), error (11), btn (10), mit (9), console (9), promise (9), kopieren (9), video (9), html (8), web (8), fullscreenchange (8), nicht (8), von (8), wenn (8), addeventlistener (8), für (7), wie (7), eine (7), color (7), container (7), getelementbyid (7), einem (7), tools (6), einführung (6), sie (6), verlassen (6), sind (6), einer (6), nur (6), anfrage (6), catch (6), script (6), w3docs (5), übungen (5), css (5), des (5), kann (5), aus (5), benutzeroberfläche (5), durch (5), benutzer (5), ablehnung (5), vollbild (5), zurück (5), fullscreenerror (5), seite (5), fullscreenenabled (5), const (5), string (5), formatter (5), alle (4), json (4), code (4), generator (4), browserunterstützung (4), beispiel (4), behandeln (4), beenden (4), this (4), denen (4), benutzergeste (4), esc (4), verlässt (4), immer (4), abgelehnt (4), werden (4), return (4), safari (4), updatebuttonvisibility (4), fullscreenelement (4), click (4), err (4), content (4), gibt (4), the (4), eigenschaften (4), shadow (4), fetch (4), async (4), über (3), encoder (3), editor (3), quizze (3), php (3), kompatibilität (3), vollbildänderungen (3), aktivieren (3), page (3), betreten (3), ausgelöst (3), elemente (3), videos (3), welche (3), promises (3), bildschirm (3), lassen (3), anfragen (3), hören (3), anstatt (3), hat (3), eigenen (3), sollte (3), muss (3), fallstricke (3), webkitexitfullscreen (3), webkitrequestfullscreen (3), chrome (3), bei (3), listener (3), ruft (3), dem (3), target (3), request (3), style (3), display (3), log (3), eigene (3), symbol (3), methode (3), url (3), dieses (3), flag (3), data (3), objekte (3), and (3), funktionen (3), objekt (3), operatoren (3), entwickler (2), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), probier (2), python (2), java (2), git (2), bücher (2), snippets (2), fazit (2), vollständiges (2), validation (2), was (2), beim (2), bietet (2), können (2), anzuzeigen (2), folgenden (2), aussagen (2), zutreffend (2), einzelnes (2), spiele (2), zurückgegebene (2), synchron (2), halten (2), anzunehmen (2), taste (2), ohne (2), daher (2), vertrauen (2), iframe (2), per (2), sandbox (2), blockiert (2), aufruf (2), eines (2), klick (2), tastatur (2), handlers (2), echten (2), interaktion (2), häufige (2), older (2), browsern (2), edge (2), vorgepfixten (2), versionen (2), alte (2), jeder (2), damit (2), meldet (2), zeigt (2), zur (2), normalen (2), handler (2), wobei (2), jede (2), selbst (2), failed (2), none (2), exitbuttoncontainer (2), exitbtn (2), message (2), attempting (2), enable (2), position (2), center (2), main (2), hier (2), dokument (2), mode (2), else (2), sich (2), zustand (2), ändert (2), einen (2), prüfung (2), dass (2), aufgerufen (2), ermöglicht (2), weshalb (2), hinweis (2), möchte (2), hide (2), navigationui (2), screen (2), verfügbar (2), stillschweigend (2), fehler (2), innerhalb (2), laden (2), anfang (2), canvas (2), erklärt (2), styling (2), workers (2), file (2), suche (2), muster (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), microtasks (2), formulare (2), benutzerdefinierte (2), ereignisse (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), chaining (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), verwenden (2), property (2), object (2), arrow (2), new (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, prüfen, enthält, benutzereingabe, sperren, bilder, umschalten, bildschirmausrichtung, geräts, ändern, erlaubt, webinhalte, unterstützten, geräten, übung, weiterzulernen, erkunde, aufbaut, manipulation, saubere, gestengesteuerte, möglichkeit, präsentationen, galerien, übernehmen, wesentlichen, punkte, heraus, berührung, codes, aktualisieren, ablehnen, richtlinie, blockieren, hinzufügen, sei, denn, attribut, allow, eingeschränkte, iframes, außerhalb, keine, kein, padding, fff, 000, background, stylen, verwendet, pseudoklasse, closefullscreen, openfullscreen, allen, modernen, unterstützt, firefox, opera, mithilfe, standardmäßigen, ältere, sehr, verwendeten, präfix, diese, unterstützen, fällt, namen, webkit, führt, zustandsänderung, auch, drückt, nie, außer, sync, gerät, abgelehnte, solange, tatsächlich, indem, gelesen, zurückzukehren, prüft, dann, abgefangen, funktioniert, teil, block, relative, height, 100vh, flex, align, items, justify, nun, setzen, wir, alles, vollständigen, funktionierenden, zusammen, gestellt, wurde, lesen, darauf, einfaches, protokollieren, warum, dieser, schreibt, nachrichten, konsole, nachdem, hilft, entwicklern, zustandsübergänge, verstehen, zusätzlich, behandelt, fälle, abzufangen, ablehnt, aufgrund, sicherheitseinschränkungen, benutzerabbruch, exited, entered, löst, sobald, unabhängig, davon, änderung, erfolgte, zuverlässige, weg, zum, ersetzen, klicken, bestätigt, existiert, bevor, außerdem, jederzeit, drücken, kontrolliert, einzige, ausweg, jeweils, haben, wissen, welches, aktiv, aktuelle, ihr, normales, layout, ihn, ignorieren, aber, nützlich, immersivste, ansicht, auto, let, decide, show, keep, navigation, truly, immersive, free, view, default, for, most, browsers, akzeptiert, optionales, optionsobjekt, eigenschaft, seine, navigationssteuerelemente, leiste, sichtbar, soll, navigations, steuern, snippet, aktiviert, geklickt, schützt, vor, eingebetteten, kontexten, eingeschränkten, funktion, scheitern, not, supported, your, like, interactive, media, aufgelöst, erfolgreich, verweigert, anhängen, unbehandelten, akzeptieren, tastendruck, ausgeführt, timer, fast, erforderlich, zwei, regeln, wichtig, beliebigen, vergrößern, sogar, gesamte, documentelement, fehlschlägt, true, aktuell, angezeigte, falls, keines, vorhanden, null, zurückkehren, auszufüllen, kapitel, betritt, reagiert, auftreten, anforderung, sowie, wichtigsten, webseite, anzuweisen, gesamten, adressleiste, tabs, betriebssystems, ausgeblendet, videoplayern, online, spielen, präsentationstools, bildergalerien, antreibt, beispielen, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, history, orientation, push, webgl, battery, animations, apis, regexp, sticky, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, slots, komposition, template, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, abbruch, download, fortschritt, formdata, network, requests, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, standard, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, verändern, attribute, knoteneigenschaften, typ, tag, inhalt, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, window, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, try, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, var, scope, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, array, strings, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript fullscreen api javascript fullscreen api erklärt vollbild aktivieren beenden fullscreenchange events häufige fallstricke und browserunterstützung mit beispielen einführung in die javascript fullscreen api die javascript fullscreen api ermöglicht es einer webseite den browser anzuweisen ein einzelnes element und nur dieses element auf dem gesamten bildschirm anzuzeigen wobei adressleiste tabs und die benutzeroberfläche des betriebssystems ausgeblendet werden das ist es was den vollbild button bei videoplayern online spielen präsentationstools und bildergalerien antreibt dieses kapitel erklärt wie man den vollbildmodus betritt und verlässt wie man mit events auf vollbildänderungen reagiert welche fallstricke auftreten können die anforderung einer benutzergeste das zurückgegebene promise und das styling sowie die browserunterstützung die wichtigsten methoden und eigenschaften sind element requestfullscreen ein element anfragen um den bildschirm auszufüllen gibt ein promise zurück document exitfullscreen vollbild verlassen und zur normalen seite zurückkehren document fullscreenelement das aktuell im vollbildmodus angezeigte element oder null falls keines vorhanden document fullscreenenabled true wenn vollbild verfügbar und nicht blockiert ist fullscreenchange fullscreenerror events werden ausgelöst wenn sich der zustand ändert oder eine anfrage fehlschlägt vollbildmodus in javascript aktivieren um den vollbildmodus zu betreten ruft man die methode requestfullscreen auf einem beliebigen dom element auf das man vergrößern möchte ein video ein div ein canvas sogar das gesamte document documentelement zwei regeln sind von anfang an wichtig eine benutzergeste ist erforderlich browser akzeptieren requestfullscreen nur wenn es innerhalb einer echten interaktion wie einem klick oder einem tastendruck ausgeführt wird ein aufruf beim laden der seite oder aus einem timer wird stillschweigend abgelehnt weshalb es fast immer innerhalb eines event handlers aufgerufen wird es gibt ein promise zurück das promise wird aufgelöst wenn der vollbildmodus erfolgreich ist und abgelehnt mit einem fehler wenn der browser die anfrage verweigert immer ein catch anhängen damit eine ablehnung nicht zu einer unbehandelten ablehnung wird div id main content button id fs btn go fullscreen button div id video container your content like a video or interactive media div div script const element document getelementbyid video container const btn document getelementbyid fs btn btn addeventlistener click function if document fullscreenenabled element requestfullscreen catch err console error error attempting to enable fullscreen err message else console log fullscreen api is not supported in this browser script kopieren dieses snippet aktiviert den vollbildmodus für das element video container wenn der button geklickt wird die prüfung auf document fullscreenenabled schützt vor browsern oder eingebetteten kontexten wie einem per sandbox eingeschränkten iframe in denen die funktion nicht verfügbar ist und das catch meldet jede ablehnung anstatt sie stillschweigend scheitern zu lassen navigations ui steuern requestfullscreen akzeptiert ein optionales optionsobjekt die eigenschaft navigationui gibt einen hinweis ob der browser seine navigationssteuerelemente zurück button url leiste sichtbar lassen soll hide request a truly immersive chrome free view default for most browsers show keep the browser s navigation ui on screen auto let the browser decide element requestfullscreen navigationui hide kopieren es ist nur ein hinweis der browser kann ihn ignorieren aber er ist nützlich für spiele und videos bei denen man die immersivste ansicht möchte vollbildmodus beenden eine seite kann jeweils nur ein element im vollbildmodus haben daher muss man nicht wissen welches element aktiv ist um den vollbildmodus zu verlassen document exitfullscreen verlässt immer das aktuelle und gibt die seite in ihr normales layout zurück div id exit button button id exit btn exit fullscreen button div script document getelementbyid exit btn addeventlistener click function if document exitfullscreen document exitfullscreen script kopieren hier verlässt der benutzer den vollbildmodus durch klicken auf einen exit fullscreen button die prüfung if document exitfullscreen bestätigt dass die methode existiert bevor sie aufgerufen wird der browser ermöglicht es dem benutzer außerdem den vollbildmodus jederzeit durch drücken von esc zu verlassen der eigene code kontrolliert das nicht weshalb man auf das fullscreenchange event hören sollte anstatt anzunehmen dass der eigene button der einzige ausweg ist vollbildänderungen mit events behandeln die fullscreen api löst events aus sobald sich der zustand ändert unabhängig davon wie die änderung erfolgte durch den eigenen button die esc taste oder den browser selbst auf sie zu hören ist der zuverlässige weg die eigene benutzeroberfläche synchron zu halten zum beispiel um ein betreten symbol durch ein verlassen symbol zu ersetzen document addeventlistener fullscreenchange function event if document fullscreenelement console log entered fullscreen mode else console log exited fullscreen mode kopieren dieser event listener schreibt nachrichten in die konsole je nachdem ob das dokument im vollbildmodus ist oder nicht und hilft entwicklern die zustandsübergänge zu verstehen zusätzlich sollte das fullscreenerror event behandelt werden um fälle abzufangen in denen der browser die anfrage ablehnt z b aufgrund von sicherheitseinschränkungen oder benutzerabbruch document addeventlistener fullscreenerror function event console error fullscreen request failed event target error kopieren hier ist event target das element für das die anfrage gestellt wurde das lesen von error darauf oder einfaches protokollieren des events zeigt warum der browser abgelehnt hat nun setzen wir alles in einem vollständigen funktionierenden beispiel zusammen ein vollständiges beispiel div id main content button id fs btn go fullscreen button div id video container style position relative height 100vh display flex align items center justify content center div id exit button style display none button id exit btn exit fullscreen button div div div script const element document getelementbyid video container const exitbtn document getelementbyid exit btn const exitbuttoncontainer document getelementbyid exit button document getelementbyid fs btn addeventlistener click function if document fullscreenenabled element requestfullscreen catch err console error error attempting to enable fullscreen err message exitbtn addeventlistener click function if document exitfullscreen document exitfullscreen function updatebuttonvisibility exitbuttoncontainer style display document fullscreenelement block none document addeventlistener fullscreenchange updatebuttonvisibility document addeventlistener fullscreenerror function event console error fullscreen request failed event target error script kopieren probier es selbst so funktioniert jeder teil der go fullscreen handler prüft document fullscreenenabled und ruft dann element requestfullscreen auf dem video container auf wobei jede ablehnung abgefangen wird der exit fullscreen handler ruft document exitfullscreen auf um zur normalen seite zurückzukehren updatebuttonvisibility zeigt den exit button nur an solange tatsächlich ein element im vollbildmodus ist indem document fullscreenelement gelesen wird der fullscreenchange listener führt updatebuttonvisibility bei jeder zustandsänderung aus auch wenn der benutzer esc drückt damit die benutzeroberfläche nie außer sync gerät und der fullscreenerror listener meldet eine abgelehnte anfrage kompatibilität und browserunterstützung die fullscreen api wird von allen modernen browsern unterstützt chrome firefox safari opera und edge mithilfe der standardmäßigen nicht vorgepfixten methoden ältere safari versionen und sehr alte chrome edge versionen verwendeten das webkit präfix webkitrequestfullscreen webkitexitfullscreen wenn man diese unterstützen muss fällt man auf den vorgepfixten namen zurück function openfullscreen element if element requestfullscreen return element requestfullscreen if element webkitrequestfullscreen older safari return element webkitrequestfullscreen function closefullscreen if document exitfullscreen return document exitfullscreen if document webkitexitfullscreen older safari return document webkitexitfullscreen kopieren um ein element im vollbildmodus zu stylen verwendet man die css pseudoklasse fullscreen video container fullscreen background color 000 color fff padding 20 px kopieren häufige fallstricke keine benutzergeste kein vollbild der aufruf von requestfullscreen außerhalb eines klick oder tastatur handlers wird abgelehnt es muss aus einer echten interaktion ausgelöst werden per sandbox eingeschränkte iframes sind blockiert es sei denn der iframe hat das attribut allow fullscreen die promise ablehnung behandeln ein benutzer kann die anfrage ablehnen oder eine richtlinie kann sie blockieren immer catch hinzufügen nicht nur auf den eigenen button vertrauen die esc taste verlässt den vollbildmodus ohne berührung des eigenen codes daher sollte man auf das fullscreenchange event vertrauen um die benutzeroberfläche zu aktualisieren fazit die fullscreen api bietet eine saubere gestengesteuerte möglichkeit ein einzelnes element für videos spiele präsentationen und galerien den bildschirm übernehmen zu lassen die wesentlichen punkte sind aus einer benutzergeste heraus anfragen das zurückgegebene promise behandeln mit document exitfullscreen beenden und die benutzeroberfläche durch hören auf das fullscreenchange event synchron halten anstatt anzunehmen wie der benutzer den vollbildmodus verlassen hat um weiterzulernen erkunde browser events dom manipulation und promises auf denen die fullscreen api aufbaut übungen übung welche der folgenden aussagen über die javascript fullscreen api sind zutreffend welche der folgenden aussagen über die javascript fullscreen api sind zutreffend sie erlaubt es webinhalte auf unterstützten geräten im vollbildmodus anzuzeigen die fullscreen api kann die bildschirmausrichtung des geräts ändern entwickler können den vollbildmodus für elemente wie videos und bilder umschalten die api bietet methoden um die benutzereingabe im vollbildmodus zu sperren sie enthält ein event das beim betreten oder verlassen des vollbildmodus ausgelöst wird prüfen was this page helpful yes no previous console api next validation api on this page einführung in die javascript fullscreen api vollbildmodus in javascript aktivieren vollbildmodus beenden vollbildänderungen mit events behandeln ein vollständiges beispiel kompatibilität und browserunterstützung fazit übungen w3docs kostenlose tutorials beispiele übungen snippets und quizze für das web seit 2014 bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen üben übungen quizze probier editor tools html editor password generator html encoder code diff json beautifier unternehmen über uns kontakt datenschutzrichtlinie...