前言 ：全屏展示 不是我们经常说的 高度 100%，宽度100%；然后在加一个固定定位，
其实这是错误的，并不是真正的全屏，大家都看多视频吧！很多视频播放器都有全屏效果，你可以去试试 这种效果是不是和你的不一样，下面言归正传！，
我主要介绍 angular 的全屏和 JS中的全屏实现，我们一起看代码吧！
Angular 4.0 实现全屏
1.0 在typescript 的控制器中引入依赖 我的依赖如图
import {Component, ElementRef, OnInit}from '@angular/core';
2.0 控制器 继承 ElementRef 这个类，用于获取DOM元素
因为在angular 的框架中获取DOM元素必需 依赖这个类 ，来自于angular的核心模块.
其他类 根据需要引入
constructor(private route :ActivatedRoute,
private router: Router,
private service:CarPlanService,
private http: Http,
private el: ElementRef,
private confirmationService: ConfirmationService,
private permissionCodeService: PermissionCodeService
) { }
3.0 给按钮添加方法 太简单了 没有截图
<button type="button" id="btnId" class="btn sbss" style="float:right;margin-left:15px;" (click)="showAllTemplate()">全屏展示< button>
4.0 在ts,内定义方法
showAllTemplate(){
//显示全屏
this.showALL =true;
//获取要展示全屏的元素
let fullscreenDiv =document.getElementById("showAll");
let fullscreenFunc =fullscreenDiv.requestFullscreen;
// 设定docuement 的参数
if (!fullscreenFunc) {
['mozRequestFullScreen',
'msRequestFullscreen',
'webkitRequestFullScreen'].forEach(function (req) {
fullscreenFunc =fullscreenFunc ||fullscreenDiv[req];
});
}
//把全屏展示的内容 通过call 改变this指向
fullscreenFunc.call(fullscreenDiv);
}
js 版本 实现全屏
代码如下 : 解释 如上
HTML:如下直接粘贴
<div id="fullscreen">
<h1>:fullscreen Demo<h1>
<p>This text will become big and red when the browser is in fullscreen mode.</p>
<button id="fullscreen-button">Enter Fullscreen<button>
</div>
css ：:如下直接粘贴
#fullscreen:-moz-full-screen {
padding: 42px;
background-color: pink;
border: 2px solid #f00;
font-size: 200%;
}
#fullscreen:-webkit-full-screen {
padding: 42px;
background-color: pink;
border: 2px solid #f00;
font-size: 200%;
}
#fullscreen:-moz-full-screen > h1 {
color: red;
}
#fullscreen:-webkit-full-screen > h1 {
color: red;
}
#fullscreen:-moz-full-screen > p {
color: darkred;
}
#fullscreen:-webkit-full-screen > p {
color: darkred;
}
#fullscreen:-moz-full-screen > button {
display: none;
}
#fullscreen:-webkit-full-screen > button {
display: none;
} #fullscreen:fullscreen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#fullscreen:fullscreen > h1 {
color: red;
}
#fullscreen:fullscreen > p {
color: darkred;
}
#fullscreen:fullscreen > button {
display: none;
}
js :如下直接粘贴
var fullscreenButton = document.getElementById("fullscreen-button");
var fullscreenDiv = document.getElementById("fullscreen");
var fullscreenFunc = fullscreenDiv.requestFullscreen;
if (!fullscreenFunc) {
['mozRequestFullScreen',
'msRequestFullscreen',
'webkitRequestFullScreen'].forEach(function (req) {
fullscreenFunc = fullscreenFunc || fullscreenDiv[req];
});
}
function enterFullscreen() {
fullscreenFunc.call(fullscreenDiv);
}
fullscreenButton.addEventListener('click', enterFullscreen);
来试试你的第一个全屏 demo 吧 ！！！
