欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

元素全屏的设置与监听实例

程序员文章站 2022-07-06 19:42:20
设置全屏和退出全屏 //全屏设置 $('#fullscreen').on('click', function () { fullscreen();...

设置全屏和退出全屏

//全屏设置
 $('#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();
 }
}

监听全屏事件

//监听全屏
 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);

以上这篇元素全屏的设置与监听实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。