针对html元素的全屏实现

本文介绍如何利用浏览器API实现HTML元素的全屏功能,提供了一种实现元素视觉聚焦的技巧,如HTML5全屏效果。通过兼容处理不同浏览器的全屏API,可以在页面中针对特定元素进行全屏操作。在实际使用中,注意到了元素全屏与网页全屏之间的冲突问题,提出了临时解决方案——在元素全屏状态下阻止网页全屏的键盘事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这是个很棒的功能。一般我们都是直接针对网页来实现,等同与F11的功能。

但是今天发现个好玩的,可以针对某元素实现全屏⊙_⊙
这就很6了,有了它我们就能实现类似元素视觉聚焦,如HTML5全屏等╮(╯▽╰)╭
实现原理,主要靠浏览器提供的API支持

首先是w3c标准的

// 全屏
element.requestFullScreen();
// 退出全屏
document.exitFullscreen();

而各家浏览器的私有支持的

// Chrome
document.webkitCancelFullScreen();
// 火狐
document.mozRequestFullScreen();

这情况嘛,当然是做兼容处理啦~

//  做个全屏的构造函数
var FullScreen = function(elem){
  this.elem = document.querySelector(elem);
}
//  全屏
FullScreen.prototype.in = function() {  
    if (this.elem.requestFullscreen) {
      this.elem.requestFullscreen();
    } else if (this.elem.webkitRequestFullscreen) {
      this.elem.webkitRequestFullscreen();
    } else if (this.elem.mozRequestFullScreen) {
      this.elem.mozRequestFullScreen();
    } else if (this.elem.msRequestFullscreen) {
      //  IE的实现没有实测过,不过据网上的资料说IE11以下可实现的
      this.elem.msRequestFullscreen();
    }
}
//  退出全屏
FullScreen.prototype.out = function() {  
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
}

当我们使用的时候,new一个就好了

var test = new FullScreen(".test");
//  全屏
test.in();
//  退出
test.out();

补充说明,测试过程中发现个bug:元素全屏和网页全屏(F11)的退出会冲突…暂时思路是在元素屏蔽的期间屏蔽网页全屏的键盘事件

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值