js全屏和退出全屏代码范例

js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌、火狐、360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏)。

这个demo基本是够了,直接复制下面的源码另存为html文件看效果吧。

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代码</title>
<body>
<!--  requestFullScreen(document.documentElement): 整个网页进入全屏
      requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏
 -->
<button onclick="requestFullScreen(document.documentElement)">全屏显示</button>
<button onclick="exitFull()">退出全屏</button>
</body>
<script type="text/javascript">
function requestFullScreen(element) {
    // 判断各种浏览器,找到正确的方法
    var requestMethod = element.requestFullScreen || //W3C
    element.webkitRequestFullScreen ||    //Chrome等
    element.mozRequestFullScreen || //FireFox
    element.msRequestFullScreen; //IE11
    if (requestMethod) {
        requestMethod.call(element);
    }
    else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}
//退出全屏 判断浏览器种类
function exitFull() {
    // 判断各种浏览器,找到正确的方法
    var exitMethod = document.exitFullscreen || //W3C
    document.mozCancelFullScreen ||    //Chrome等
    document.webkitExitFullscreen || //FireFox
    document.webkitExitFullscreen; //IE11
    if (exitMethod) {
        exitMethod.call(document);
    }
    else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}
</script>
</html>

时间: 2024-11-01 09:52:13

js全屏和退出全屏代码范例的相关文章

JS 全屏和退出全屏详解及实例代码_基础知识

JS 全屏和退出全屏 js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌.火狐.360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏). 这个demo基本是够了,直接复制下面的源码另存为html文件看效果吧. <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

android编程开发之全屏和退出全屏的实现方法_Android

本文实例讲述了android编程开发之全屏和退出全屏的实现方法.分享给大家供大家参考,具体如下: xml代码: <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fullscreen" android:onClick

android编程开发之全屏和退出全屏的实现方法

本文实例讲述了android编程开发之全屏和退出全屏的实现方法.分享给大家供大家参考,具体如下: xml代码: <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fullscreen" android:onClick

JS实现浏览器全屏和退出全屏

   测试环境:     [操作系统]: win7 64位     [IE]:IE9     [FireFox]: FireFox 29     [Chrome]: Chrome 34     众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断--专门针对IE浏览器的判断,这里的全屏也不例外.看代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 2

网页怎么退出全屏,网页退出全屏有哪些快捷键?

1.浏览器一般右上角都有个双重小框框即是还原按钮,图标是两个小口. 你点下就不是全屏啦,或者你在浏览器的边框部分按住鼠标左键往下拉就可以控制浏览器窗口大小拉!! 2.F11快捷键,有些用Esc也可以推出全屏! 3.直接用组合键盘,alt+f4,关闭掉窗口就是推出全盘了! 相关知识点推荐阅读:如何让IE窗口每次打开都默认为"最大化"显示? 方法一:先把所有的IE窗口关了;只打开一个IE窗口;最大化这个窗口;关了它;OK,以后的默认都是最大化的了 方法二:先关闭所有的IE浏览器窗口,用鼠标

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

 这篇文章主要介绍了js控制页面的全屏展示和退出全屏显示的方法,实例分析了javascript控制页面全屏效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js控制页面的全屏展示和退出全屏显示的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset

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

本文实例讲述了js控制页面的全屏展示和退出全屏显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <body>    <div style="margin:0 auto;heig

浮动栏退出-windows编程 窗口全屏无边框时设置浮动栏(带有最小化按钮和退出按钮)退出全屏

问题描述 windows编程 窗口全屏无边框时设置浮动栏(带有最小化按钮和退出按钮)退出全屏 悬浮框的代码是参考freerdp实现的. 请指出错误或者提供解决代码,谢谢 //============================= #include #include "resource.h" typedef struct wf_context wfContext; typedef struct _Button Button; typedef struct _FloatBar Floa

Android 应用的全屏和非全屏实现代码

Android 应用的全屏和非全屏实现代码 全屏显示操作: /** * 全屏显示 */ private void setFullSreen() { WindowManager.LayoutParams params = getWindow().getAttributes(); params.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN; getWindow().setAttributes(params); getWindow().addF