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 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
详解参数传递四种形式
Jul 21 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
深入理解Node module模块
Mar 26 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
Destoon模板制作简明教程
2014/06/20 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
iframe实用操作锦集
2014/04/22 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
自我评价优缺点范文
2015/03/11 职场文书
英文慰问信范文
2015/03/24 职场文书
跳高加油稿
2015/07/21 职场文书
Redis 常见使用场景
2021/08/30 Redis