【angular-实践】实现浏览器F11全屏效果

.html

<div (click)="fullscreenToggle()">全屏</div>

.component.ts

declare const document: any;@Component({selector: 'uv-header',templateUrl: './header.component.html',styleUrls: ['./header.component.less']
})
export class HeaderComponent implements OnInit {isFullscreen = false;public fullscreenToggle(elem: any = document.documentElement): void{if(!document.fullscreenElement && !document.webkitFullscreenElement) {const docElm = elem;if(docElm.requestFullscreen){docElm.requestFullscreen();this.isFullscreen = true;} else if (docElm.mozRequestFullscreen) {docElm.mozRequestFullscreen();this.isFullscreen = true;} else if (docElm.webkitRequestFullscreen) {docElm.webkitRequestFullscreen();this.isFullscreen = true;} else if (docElm.msRequestFullscreen) {docElm.msRequestFullscreen();this.isFullscreen = true;}} else {if(document.exitFullscreen) {document.exitFullscreen();this.isFullscreen = false;} else if (document.webkitCancelFullscreen) { this.isFullscreen = false;document.webkitCancelFullscreen();}}}}

参考

【angular-实践】实现浏览器F11全屏效果相关推荐

前端通过代码实现F11全屏效果
以chrome浏览器为例: 整个页面全屏:document.documentElement.webkitRequestFullscreen() 某个元素全屏:document.getElementBy ...
如何实现浏览器的全屏效果
浏览器中自带全屏功能 document.documentElement.webkitRequestFullScreen(),不过有兼容性问题,所以改用插件使用screenFull插件来提供全屏功能 ...
js如何设置浏览器全屏效果？
现在很多网页游戏进入游戏界面后都是全屏显示的效果,很多人问我这个要怎么实现,其实这个只要调用Fullscreen API就可以实现了作为一个比较新的 API,目前只有 Safari.Chrome 和 ...
H5实现全屏与F11全屏
最近做项目用到全屏,现总结一下全屏: 1.局部全屏:H5全屏和F11有区别,在这种情况下判断全屏只需要通过H5全屏属性,无论全屏后有无滚动条都可判断. /** * [isFullsc ...
html5实现浏览器自动全屏,[JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有g ...
浏览器的全屏功能小结
原文地址: 浏览器的全屏功能小结背景浏览器页面在视频播放, 图片浏览, 编辑文本等场景, 会遇到增大页面的可查看和可交互区域的需求. 对于这种场景, 一般做法是提供一个全屏按钮, 用户可以选择点击 ...
前端js使浏览器窗口全屏与退出----浏览器全屏时监测通过esc按键退出全屏（退出全屏时有页面上的相关处理）
vue项目项目分为顶部导航.侧边导航.以及右边mainContent区域需求是让项目的其中一个页面有全屏功能并且在全屏时隐藏掉顶部的顶导航栏实现: 1.在state里定义一个全局 ...
JavaScript 触发浏览器页面全屏，某div区域全屏
JavaScript Fullscreen API:全屏操作全屏API可以控制浏览器的全屏显示,让一个Element节点(以及子节点)占满用户的整个屏幕.目前各大浏览器的最新版本都支持这个API(包 ...
包括edge，Chrome，火狐、百度，360等浏览器怎么全屏_如何在Microsoft Edge中启用和禁用全屏模式以及解决浏览器无法开启或关闭全屏的问题
文章目录 1. 引出问题 2. 解决问题 2.1 使用缩放菜单 2.2 Win + Shift + Enter窍门 2.3 最大化与全屏模式 2.4 以全屏模式观看网络视频 3. 重要总结 4. 解决 ...

【angular-实践】实现浏览器F11全屏效果

【angular-实践】实现浏览器F11全屏效果相关推荐

最新文章

热门文章