JS实现浏览器全屏

JavaScript010

JS实现浏览器全屏,第1张

注解:ele要全屏的元素

退出全屏直接使用document调用exitFullscreen方法即可。

document.fullscreenElement():获取当前全屏的元素。

注意:

1.document下没有requestFullscreen

2.requestFullscreen方法只能由用户触发,比如:在onload事件中不能触发

3.页面跳转需先退出全屏

4.进入全屏的元素,将脱离其父元素,所以可能导致某些css失效

解决方案:使用 :full-screen伪类 为元素添加全屏时的样式(使用时为了兼容注意添加-webkit、-moz或-ms前缀)

5.一个元素全屏后,其子元素要再全屏,需先让该元素退出全屏

方法一

style

html

JS

方法二

html

JS

方法三

html

JS

方法四 JQUERY

html

CSS

fullScreen.js

调用

1、引入外部jquery文件

比如:

<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

2、点击按钮时的JQuery代码

$(document).ready(function () {

 $("#go").click(function () {       

 /*属性*/       

 $("#go2").css({ "position": "absolute", "text-align": "center", "top": "0px", "left": "0px", "right": "0px", "bottom": "0px", "background": "red", "visibility": "visible", "filter": "Alpha(opacity=90)"

 })       

 /*高为屏幕的高*/       

 $("#go2").css({           

     height: function () {           

         return $(document).height()       

     },           

     width:"100%"        

 })    

})

})

3、html页面代码

<asp:Button ID="go" runat="server" Style="width: 380px position: absolute top: 249pxleft: 425px background-color: Green height: 65px" Text="后台执行程序,前台遮盖,运行完毕后自动消失" />

<div id="go2">

 正在提交数据...

</div>