最近做了一个号称很炫的B/S展示软件，展示所用浏览器为Google Chrome。
要求展示时全屏，但是页面要有退出全屏按钮(液晶屏没有键盘)。
搜索实现方式几乎前篇一律，即两个JS函数一个实现全屏一个退出全屏：
function requestFullScreen(element)

{

    if (element.requestFullscreen)

        element.requestFullscreen();

    else if (element.msRequestFullscreen)

        element.msRequestFullscreen();

    else if (element.mozRequestFullScreen)

        element.mozRequestFullScreen();

    else if (element.webkitRequestFullscreen)

        element.webkitRequestFullscreen();

}

function cancelFullScreen()

{

    if (document.exitFullscreen)

        document.exitFullscreen();

    else if (document.msExitFullscreen)

        document.msExitFullscreen();

    else if (document.mozCancelFullScreen)

        document.mozCancelFullScreen();

    else if (document.webkitExitFullscreen)

        document.webkitExitFullscreen();

}
但是在实际调用中发现cancelFullScreen只对requestFullScreen实现的全屏有效而对F11实现的全屏没有效果。
所以就想到使用requestFullScreen实现全屏，但是问题又来了requestFullScreen实现的全屏仅对当页有效，
在页面跳转时全屏效果就会消失，所以还是只能通过F11实现全屏。
又搜索其中一种退出方式为除了上面两个函数外又添加两个函数：
function isFullScreen()

{

    return (document.fullScreenElement && document.fullScreenElement !== null)

         || document.mozFullScreen

         || document.webkitIsFullScreen;

}

function toggleFullScreen(element)

{

    if (isFullScreen())

        cancelFullScreen();

else

      requestFullScreen(element || document.documentElement);

}
通过调用toggleFullScreen函数实现退出全屏。
实现原理为：虽然之前已经F11全屏，但是isFullScreen检测结果依然为false，所以会调用requestFullScreen再次全屏。
而在刚开始实现全屏时会弹出退出全屏话框间接实现退出功能。
 
但是该方法也有个问题即会弹出两次退出全屏对话框，一次是JS调用全屏退出对话框一次是F11调用全屏对话框，如下：
修改toggleFullScreen如下便只弹出一次对话框：
function toggleFullScreen(element)

{

      requestFullScreen(element || document.documentElement);

      cancelFullScreen();

}

完整代码参考：

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

  <script src="../js/jquery-1.10.1.min.js"></script>

  <script>

function isFullScreen()

{

    return (document.fullScreenElement && document.fullScreenElement !== null)

         || document.mozFullScreen

         || document.webkitIsFullScreen;

}

function requestFullScreen(element)

{

    if (element.requestFullscreen)

        element.requestFullscreen();

    else if (element.msRequestFullscreen)

        element.msRequestFullscreen();

    else if (element.mozRequestFullScreen)

        element.mozRequestFullScreen();

    else if (element.webkitRequestFullscreen)

        element.webkitRequestFullscreen();

}

function cancelFullScreen()

{

    if (document.exitFullscreen)

        document.exitFullscreen();

    else if (document.msExitFullscreen)

        document.msExitFullscreen();

    else if (document.mozCancelFullScreen)

        document.mozCancelFullScreen();

    else if (document.webkitExitFullscreen)

        document.webkitExitFullscreen();

}

function toggleFullScreen(element)

{

      requestFullScreen(element || document.documentElement);

      cancelFullScreen();

}

   $(document).ready(function(){

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

     toggleFullScreen(document.body);

    });

   });

   </script>

 </head>

 <body>

  <div style="padding-top:300px;"></div>

  <button id="exit">退出</button>

 </body>

</html>

Chrome退出全屏问题的更多相关文章

  1. js 实现操作浏览器或者元素的全屏与退出全屏功能

    <!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...

  2. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

  3. HTML5实现全屏API【进入和退出全屏】

    现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样: [进入和退出全屏] // Webkit (works in Safari5.1 and Chrome 15)element.webkit ...

  4. JS控制全屏，监听退出全屏事件

    实现方案 //进入全屏 function requestFullScreen(de) { if(de.requestFullscreen){ //W3C de.requestFullscreen(); ...

  5. js之切换全屏和退出全屏实现

    应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等. 核心代码: //控制全屏 function enterfullscreen() { //进入全屏 $("#fullscreen&q ...

  6. HTML5--浏览器全屏操作、退出全屏、是否全屏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. iOS 多个播放器同时播放，双击全屏，单击退出全屏

    前言:公司需求如下:点击一个按钮播放一个视频,最多同时播放4个:双击某视频让其全屏,单击再恢复原来的样子.IOS的播放器有两种,MPMoviePlayerController,AVAudioPlaye ...

  8. [delphi]极域学生端解除键盘鼠标锁定退出全屏广播-强制窗口化-源代码

    v2.0  2015-07-11 更新了V2.0 版本 发布在吾爱破解论坛 欢迎下载使用 http://www.52pojie.cn/thread-382769-1-1.html ---------- ...

  9. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

随机推荐

  1. UVA 4728 Squares（凸包+旋转卡壳）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=17267 [思路] 凸包+旋转卡壳 求出凸包,用旋转卡壳算出凸包的直 ...

  2. SWFUpload无刷新文件批量上传

    一.首先将SWFUpload所有文件加入项目中,如图

  3. 兼容的placeholder属性

    作为一个.net后台开发的程序猿,博客里既然大多都是前端相关的博文.是不是该考虑换方向了,转前端开发得了 ... 小小吐槽一下,近期受该不该跳槽所困惑,我有选择困难症! 继续前端,这次说一下输入框 p ...

  4. windows ntp安装及调试

    Setting up NTP on Windows It's very helpful that Meinberg have provided an installer for the highly- ...

  5. 如何运用同余定理求余数【hdoj 1212 Big Number【大数求余数】】

    Big Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  6. 解决DATASNAP远程方法参数超过32个的问题

    群里有位同仁提出他有一个DATASNAP远程方法超过了32个参数,然后DELPHI编译通不过,提示方法参数不能超过32个,问怎么办?于是群内同仁纷纷出主意,我说用OLEVARINAT数组,有人说用RE ...

  7. 校友信息管理&SNS互动平台之技术框架选择

    前言.提纲及说明: 请移步:<校友信息管理&SNS互动平台之前言.目录及说明>(博客园地址:http://www.cnblogs.com/s6cn/p/3516876.html) ...

  8. 绘制3D的托卡马克位形图的matlab脚本文件 ThreeD.m

    % 绘制3D的托卡马克位形图, (V 0.1 by Jiale Chan for Y. H. Huang) % Dee Formula % 特征参数     rzero = 2.0;     rmax ...

  9. 记录IOS入门的过程

    先说点私话.再进入正题吧,顺便抒发下情绪.公司传统业务不景气,而互联网正如火如荼,无奈被逼上梁山.開始学起了IOS编程.后来想想闲着也是闲着就学习学习呗.无奈公司确实不希望投入了.不愿意提供苹果电脑. ...

  10. web配置nagios工具

    Nagios是一款开源的免费网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报警第一时间通知网站运维人员, ...