javascript如何实现全屏显示？ |
您所在的位置：网站首页 › js控制浏览器全屏 › javascript如何实现全屏显示？ |
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属性，则允许请求全屏显示； IE msRequestFullScreen()Opera oRequestFullScreen()以上就是javascript如何实现全屏显示？的详细内容，更多请关注html中文网其它相关文章！ |
【本文地址】
今日新闻 |
推荐新闻 |