打开html浏览器实现全屏,javascript如何实现全屏显示？

javascript可以使用Element.requestFullscreen()实现全屏也可以通过模拟F11快捷键实现全屏。Element.requestFullscreen()方法用于 异步请求使得Element(该元素)全屏显示。

JavaScript实现全屏显示：

HTML代码：

全屏显示

div {

width: 200px;

height:200px;

background:pink;

margin:100px auto;

}

button {

margin-left: 650px;

}

h1 {

margin-left: 400px;

}

js控制页面的全屏展示和退出全屏显示

全屏

1、使用Element.requestFullscreen()实现全屏：

var btn = document.getElementById("btn");

btn.onclick = function() {

var width = window.screen.width;

var height = window.screen.height;

var elem = document.getElementById("div1");

requestFullScreen(elem);

}

function requestFullScreen(element) {

if (element.requestFullscreen) {

element.requestFullscreen();

}

//FireFox

else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen();

}

//Chrome等

else if (element.webkitRequestFullScreen) {

element.webkitRequestFullScreen();

}

//IE11

else if (element.msRequestFullscreen) {

element.msRequestFullscreen();

}

};

2、JavaScript通过模拟F11快捷键实现全屏：

window.onload =function(){

document.getElementById("btn").onclick = function(){

var elem =document.getElementById("div1");

requestFullScreen(elem);

}

var requestFullScreen=function(element) {

//某个元素有请求

var requestMethod =element.requestFullScreen

||element.webkitRequestFullScreen //谷歌

||element.mozRequestFullScreen //火狐

||element.msRequestFullScreen; //IE11

if (requestMethod) {

requestMethod.call(element); //执行这个请求的方法

} else if (typeof window.ActiveXObject !== "undefined") {

//window.ActiveXObject判断是否支持ActiveX控件

//这里其实就是模拟了按下键盘的F11，使浏览器全屏

var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX

if (wscript !== null) { //创建成功

wscript.SendKeys("{F11}");//触发f11

}

}

}

}

Element.requestFullscreen()

1. Element.requestFullscreen()方法用于 异步请求使得Element(该元素)全屏显示。

Element.requestFullscreen()不能保证该元素被设置为全屏模式，如果允许该元素进入全屏模式，document将接受到fullscreenchange event事件；如果不允许，则document将接受fullscreenerror event事件。

2. 注意：

在调用Element.requestFullScreen()前，可建立 fullscreenchange和fullscreenerror 的事件处理，将方便调试是否成功请求全屏模式。

3. 浏览器的兼容性

chrome(谷歌浏览器、android浏览器)webkitRequestFullScreen()

firefox(火狐浏览器)mozRequestFullScreen()

Firefox 44 前的浏览器不允许在或内的元素请求全屏；

在Firefox 44+,允许在顶层document(即body)内的元素或者内的元素设置 allowfullScreen属性，则允许请求全屏显示；

IEmsRequestFullScreen()

OperaoRequestFullScreen()