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 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
js实现简单计算器
Nov 22 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 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
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
Js组件的一些写法
2010/09/10 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
小学教师事迹材料
2014/01/13 职场文书
研讨会主持词
2014/04/02 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
数字化校园建设方案
2014/05/03 职场文书
商务考察邀请函模板
2015/02/02 职场文书
恰同学少年观后感
2015/06/08 职场文书
组织委员竞选稿
2015/11/21 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL