前言 ：全屏展示 不是我们经常说的 高度 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 吧 ！！！