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

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

//全屏设置
 $('#fullScreen').on('click', function () {
  fullScreen();
 });
 //退出全屏
 $('#exitFullScreen').on('click', function () {
  exitFullScreen();
 });
 //进入全屏
function fullScreen() {
 var obj = document.getElementById('editMark');
 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('editMark');
 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('fullscreenchange', function () {
  if (document.fullscreenElement) {
   alert(1);
  } else {
   alert(2);
  }
 }, false);
 document.addEventListener('msfullscreenchange', function () {
  if (document.msFullscreenElement) {
   alert(1);
  } else {
   alert(2);
  }
 }, false);
 document.addEventListener('mozfullscreenchange', function () {
  if (document.mozFullScreen) {
   alert(1);
  } else {
   alert(2);
  }
 }, false);
 document.addEventListener('webkitfullscreenchange', 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!