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中:checked选择器用法实例
Jan 04 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
ES6数组的扩展详解
Apr 25 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
javascript知识点收藏
2007/02/22 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
在Django的通用视图中处理Context的方法
2015/07/21 Python
利用Python破解验证码实例详解
2016/12/08 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
pygame实现五子棋游戏
2019/10/29 Python
Python读取YAML文件过程详解
2019/12/30 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
面试后感谢信
2014/02/01 职场文书
党员个人公开承诺书
2014/08/29 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript