利用js如何做到让页面全屏和不全屏功能

Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

以下demo是页面进行全屏和正常屏幕的,你也可以用元素来进行全屏,当然

只有包含在顶层文档(top-level document)内部的标准HTML元素、<svg>元素和<math>元素,以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素,以及object的内部元素不能进入全屏模式。这段是从https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen抄过来的。


<!doctype html>
<html>
    <head>
    	<meta charset="UTF-8"/>
        <title>全屏不全屏</title>
    </head>
    <body>
          <input id="fullScreen" type="button" value="全屏"/>
			<input id="fullScreenNormal" type="button" value="正常"/>
     </body>
</html>
<script>
       document.getElementById("fullScreen").οnclick=function(){
       		if(document.documentElement.RequestFullScreen){
       			document.documentElement.RequestFullScreen();
       		}
       		//兼容火狐
       		console.log(document.documentElement.mozRequestFullScreen)
       		if(document.documentElement.mozRequestFullScreen){
       			document.documentElement.mozRequestFullScreen();
       		}
       		//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
       		if(document.documentElement.webkitRequestFullScreen){
       			document.documentElement.webkitRequestFullScreen();
       		}
       		//兼容IE,只能写msRequestFullscreen
       		if(document.documentElement.msRequestFullscreen){
       			document.documentElement.msRequestFullscreen();
       		}
       }
       document.getElementById("fullScreenNormal").οnclick=function(){
       		if(document.exitFullScreen){
       			document.exitFullscreen()
       		}
//     		//兼容火狐
//     		console.log(document.mozExitFullScreen)
       		if(document.mozCancelFullScreen){
       			document.mozCancelFullScreen()
       		}
//     		//兼容谷歌等
       		if(document.webkitExitFullscreen){
       			document.webkitExitFullscreen()
       		}
//     		//兼容IE
       		if(document.msExitFullscreen){
       			document.msExitFullscreen()
       		}
       }
</script>


  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值