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


Posted in Javascript onMarch 10, 2015

本文实例讲述了js控制页面的全屏展示和退出全屏显示的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html>    

<html>    

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    

<body>    

<div style="margin:0 auto;height:600px;width:700px;">  

<button id="btn">js控制页面的全屏展示和退出全屏显示</button>    

<div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" >  

<h1>js控制页面的全屏展示和退出全屏显示</h1>    

</div>  

</div>    

</body>    

<script language="JavaScript">      

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

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

    requestFullScreen(elem);     

};     

function requestFullScreen(element) {    

    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;    

    if (requestMethod) {      

        requestMethod.call(element);    

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

        var wscript = new ActiveXObject("WScript.Shell");    

        if (wscript !== null) {    

            wscript.SendKeys("{F11}");    

        }    

    }    

}    

</script>    

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 #Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 #Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 #Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 #Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 #Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 #Javascript
JQuery操作元素的css样式
Mar 09 #Javascript
You might like
php.ini 中文版
2006/10/28 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
PHP合并静态文件详解
2014/11/14 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
使用cx_freeze把python打包exe示例
2014/01/24 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
用python绘制樱花树
2020/10/09 Python
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
教育专业个人求职信
2013/12/02 职场文书
校运会广播稿100字
2014/01/27 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书