js实现局部全屏效果

全屏 API

全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

Document 中的方法

Document.exitFullscreen()

用于请求从全屏模式切换到窗口模式，会返回一个 Promise，会在全屏模式完全关闭的时候被置为 resolved 状态。

Element 中的方法

Element.requestFullscreen()

请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式，隐去屏幕上的浏览器所有 UI 元素，以及其它应用。返回一个 Promise，并会在全屏模式被激活的时候变成 resolved 状态。

示例

// 获取需要全屏展示的div
let fullarea = document.getElementsByClassName('gis-container')[0]

if (!document.fullscreenElement) {
	// 全屏
	fullarea.requestFullscreen();
} else {
	// 退出全屏
  	if (document.exitFullscreen) {
    	document.exitFullscreen();
  	}
}

使用说明

用户通过按 ESC 键（或 F11）即可退出全屏模式，而不是等着站点或应用的代码来做这件事。确定你在你的用户界面里提供合适的界面元素来告知用户这个可选项。

注意：当处在全屏模式中，浏览其他页面，切换标签页，或者切换到其他应用（例如使用 Alt-Tab）也会导致退出全屏模式。