So richten Sie das Element im Vollbildmodus ein und überwachen es-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

So richten Sie das Element im Vollbildmodus ein und überwachen es

亚连

Jun 23, 2018 pm 05:56 PM

Der folgende Editor zeigt Ihnen ein Beispiel für die Einrichtung und Überwachung von Elementen im Vollbildmodus, das einen guten Referenzwert hat und ich hoffe, dass es für alle hilfreich sein wird. Folgen wir dem Editor, um einen Blick darauf zu werfen

Vollbild einstellen und Vollbild beenden

//全屏设置
 $(&#39;#fullScreen&#39;).on(&#39;click&#39;, function () {
  fullScreen();
 });
 //退出全屏
 $(&#39;#exitFullScreen&#39;).on(&#39;click&#39;, function () {
  exitFullScreen();
 });
 //进入全屏
function fullScreen() {
 var obj = document.getElementById(&#39;editMark&#39;);
 if (obj.requestFullScreen) {
  obj.requestFullScreen();
 } else if (obj.webkitRequestFullScreen) {
  obj.webkitRequestFullScreen();
 } else if (obj.msRequestFullScreen) {
  obj.msRequestFullScreen();
 } else if (obj.mozRequestFullScreen) {
  obj.mozRequestFullScreen();
 }
}

function exitFullScreen() {
 var obj = document.getElementById(&#39;editMark&#39;);
 if (document.exitFullscree) {
  document.exitFullscree();
 } else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
 } else if (document.msExitFullscreen) {
  document.msExitFullscreen();
 } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 }
}

Ereignisse im Vollbildmodus anhören

//监听全屏
 document.addEventListener(&#39;fullscreenchange&#39;, function () {
  if (document.fullscreenElement) {
   alert(1);
  } else {
   alert(2);
  }
 }, false);
 document.addEventListener(&#39;msfullscreenchange&#39;, function () {
  if (document.msFullscreenElement) {
   alert(1);
  } else {
   alert(2);
  }
 }, false);
 document.addEventListener(&#39;mozfullscreenchange&#39;, function () {
  if (document.mozFullScreen) {
   alert(1);
  } else {
   alert(2);
  }
 }, false);
 document.addEventListener(&#39;webkitfullscreenchange&#39;, function () {
  if (document.webkitIsFullScreen) {
   alert(1);
  } else {
    alert(2);
  }
 }, false);

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So setzen Sie den Ruhezustand in vuex zurück

Verwenden von Angular5 zur Implementierung serverseitiger Rendering-Praktiken

So verwenden Sie erweiterte Funktionen in JavaScript

So implementieren Sie die Chat-Funktion mit nodejs

Das obige ist der detaillierte Inhalt vonSo richten Sie das Element im Vollbildmodus ein und überwachen es. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

So melden Sie ein Imitationskonto auf Instagram

1 Monate vor By 下次还敢

So ändern Sie die Chatgpt -Persönlichkeit in Einstellungen (Zyniker, Roboter, Hörer, Nerd)

3 Wochen vor By DDD

Wie man in Neon Abyss gegen Eris kämpft

1 Monate vor By Jack chen

Stehlen Sie einen Brainrot Rebirth Guide: Wie es geht und was Sie bekommen

4 Wochen vor By Jack chen

Terminull Brigade: Best <🎜> Build Guide

3 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial

1619

276

Setting up and using Magic Mouse in Windows

Related knowledge

Erzeugen Sie gelöste Doppelschokoladenrätsel: Ein Leitfaden für Datenstrukturen und Algorithmen Aug 05, 2025 am 08:30 AM

In diesem Artikel wird eingehend untersucht, wie man automatisch lösbare Rätsel für das Doppel-Choco-Puzzlespiel generiert. Wir werden eine effiziente Datenstruktur einführen - ein Zellobjekt basierend auf einem 2D -Gitter, das Grenzinformationen, Farbe und Zustand enthält. Auf dieser Basis werden wir einen rekursiven Blockerkennungsalgorithmus (ähnlich wie bei der Tiefe-First-Suche) und der Integration in den iterativen Puzzle-Erzeugungsprozess eingehen, um sicherzustellen, dass die erzeugten Rätsel den Spielregeln entsprechen und fehlerhaft sind. Der Artikel bietet Beispielcode und diskutiert wichtige Überlegungen und Optimierungsstrategien im Erzeugungsprozess.

Vercel Spa Routing und Ressourcenbelastung: Lösen Sie Probleme mit tiefem URL -Zugriff Aug 13, 2025 am 10:18 AM

Dieser Artikel soll das Problem der tiefen URL -Aktualisierung oder des direkten Zugriffs lösen, wodurch die Seitungsressourcenladefehler bei der Bereitstellung von Einzelseiten -Anwendungen (SPAs) auf Vercel verursacht wird. Der Kern besteht darin, den Unterschied zwischen dem Routing -Umschreibmechanismus von Vercel und dem Parsen von Browser -Parsen relative Pfade zu verstehen. Durch die Konfiguration von Vercel.json, um alle Pfade zu index.html umzuleiten und die Referenzmethode der statischen Ressourcen in HTML zu korrigieren, ändern Sie den relativen Pfad in den absoluten Pfad, um sicherzustellen, dass die Anwendung alle Ressourcen korrekt unter eine URL laden kann.

Wie können Sie eine CSS -Klasse mit JavaScript aus einem DOM -Element entfernen? Aug 05, 2025 pm 12:51 PM

Die häufigste und empfohlene Methode zum Entfernen von CSS -Klassen aus DOM -Elementen unter Verwendung von JavaScript ist die Methode von REME () der Classlist -Eigenschaft. 1. Verwenden Sie Element.ClassList.remove ('className'), um einen einzelnen oder mehrere Klassen sicher zu löschen, und es wird kein Fehler gemeldet, selbst wenn die Klasse nicht vorhanden ist. 2. Die alternative Methode besteht darin, die Eigenschaft der Klassenname direkt zu bedienen und die Klasse mit einem String -Austausch zu entfernen. Aufgrund der ungenauen regelmäßigen Übereinstimmung oder einer unsachgemäßen Raumverarbeitung ist es jedoch einfach, Probleme zu verursachen, sodass sie nicht empfohlen wird. 3. Sie können zuerst beurteilen, ob die Klasse existiert, und sie dann durch Element.ClassList.Contains () löschen, aber es ist normalerweise nicht erforderlich. 4. Classlist

SPA -Bereitstellungshandbuch für Einzel -Seiten -Anwendungen (Vercel Einzelseiten Aug 13, 2025 pm 01:03 PM

Dieses Tutorial zielt darauf ab, das Problem des Ladens von Assets (CSS, JS, Bildern usw.) beim Zugriff auf mehrstufige URLs (wie z. B. /Projekte /Home) bei der Bereitstellung von Einzelseiten-Anwendungen (SPAS) auf Vercel zu lösen. Der Kern liegt darin, den Unterschied zwischen dem Routing -Umschreibmechanismus von Vercel und den relativen/absoluten Wegen in HTML zu verstehen. Stellen Sie durch die korrekte Konfiguration von Vercel.json sicher, dass alle nicht-file-Anfragen in Index.html umgeleitet werden und die Vermögensreferenzen in HTML als absolute Pfade korrigieren, wodurch ein stabiler Betrieb von Spa in jeder Tiefen-URL erreicht wird.

Das Modulmuster in JavaScript: Ein praktischer Leitfaden Aug 05, 2025 am 09:37 AM

ThemodulePattrenninjavaScriptSolvestrobroBroBalsCopePollholes und und und und IndosaStoNcaps), indem CLOSURESANDIIFESTOCRATEPRIVATE EVARIABLEANDEXPOSONTROLLEDPUBLICAPI; 1) ithidesinternale Datenträger und Validatenamewithinacloslosloslosloslosloslosloslus

QWIK: Ein wiederauflösbares Framework für Sofortladungs-Web-Apps Aug 15, 2025 am 08:25 AM

QwikachievesInstantloadingByDefaultThroughResumability, Nothydration: 1) theserverrendershtmlwithserializedStateandand-MappentListerner;

Js fügen Element hinzu, um Array zu beginnen Aug 14, 2025 am 11:51 AM

In JavaScript ist die häufigste Methode, um Elemente zu Beginn eines Arrays hinzuzufügen, die Verwendung der Unshift () -Methode. 1. Wenn Sie Unshift () verwenden, können Sie das ursprüngliche Array direkt ändern. Sie können ein oder mehrere Elemente hinzufügen, um die neue Länge des hinzugefügten Arrays zurückzugeben. 2. Wenn Sie das ursprüngliche Array nicht ändern möchten, wird empfohlen, den Erweiterungsoperator (z. B. [NewLement, ... arr]) zu verwenden, um ein neues Array zu erstellen. 3.. Sie können auch die concat () -Methode verwenden, um das neue Element -Array mit der ursprünglichen Nummer zu kombinieren, das neue Array zurückgibt, ohne das ursprüngliche Array zu ändern. Zusammenfassend verwenden Sie Unshift () beim Ändern des ursprünglichen Arrays und empfehlen Sie den Erweiterungsoperator, wenn Sie das ursprüngliche Array unverändert halten.

So laden Sie Bilder mit JavaScript. Laden Sie Bilder Aug 14, 2025 pm 06:43 PM

Usetheloading = "Lazy" AttributeFornativaLaLaLaLoadingInmodernBrowsers-WithoutjavaScript.2.FormoreControlOrolderBrowsersupport, implementleLaDingWithTheIntersectionObServerapibysettingData-SrcFeTheActualimageurlandusingAplaeholmerinsrc.3.obse

See all articles