javascript full screen 全屏显示页面元素的方法

一种最简单的方式，就是动态改变你想要全屏显示的部件的style，例如position变成absolute，height和width都设置成窗口大小，并且把背景颜色改成全白（为了遮住页面上其余的元素）。这样网页上就只能看到你要突出的部件了，视觉上就等同于全屏。同时利用javascript监听键盘事件，一旦用户按了ESc退出键，就恢复原来的样子。部分代码如下：

代码如下:

document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 27) { //ESC键

$('.navbar-inner').fadeIn(100);
            var maintable = document.getElementById("holder");
            maintable.style.position = "relative";
            maintable.style.height = "100%";
            maintable.style.width = "100%";
            maintable = document.getElementById("main");
            maintable.style.height = "100%";
            maintable.style.width = "100%";
            maintable.style.left = 0 + "px";
            maintable.style.top = 0 + "px";
            resizePlots();
        }       
    };

fullScreenClick: function () {

$('.navbar-inner').fadeOut(100);

var maintable = document.getElementById("holder");
maintable.style.position = "absolute";
maintable.style.background = "#fff";
//maintable.style.zIndex = 5;
maintable.style.height = $(window).height() + "px";
maintable.style.width = $(window).width() + "px";
maintable.style.left = 0 + "px";
maintable.style.top = 0 + "px";
maintable = document.getElementById("main");
maintable.style.height = "90%";
maintable.style.width = "90%";
maintable.style.left = $(window).width() * 0.05 + "px";
maintable.style.top = $(window).height() * 0.02 + "px";
resizePlots();
},

但是这样做有个缺点，就是还需要手工按一下F11来达到真正的全屏。

下面有一种方法不用自己按F11的：

代码如下:

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body  >

<button id="btn" > full screen </button>

<div id="content" style="height:500px;width:500px;background:#fff">
<h1>欢迎微博互粉！</h1>
<h2>weibo.com/leavingseason</h2>
<p>相信音乐，相信五月天</p>
</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>

这个可以支持大部分的浏览器。但是讨厌的IE还是不能支持HTML5的全屏功能，需要模拟按F11这个动作。读者可以在代码中看到。

还可以在代码里面退出全屏界面：

代码如下:

function cancelFullScreen(el) {
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
            if (requestMethod) { // cancel full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

关于全屏显示，我还是很好奇，那么视频网站是如何做到对IE等浏览器都兼容的全屏功能的。如果有谁知道的话，还请分享一下，感激不尽。

updated (2013/09/22)

很多时候，想在全屏切换的时候做一些自定义的事情。可以如下绑定事件：

代码如下:

document.addEventListener("fullscreenchange", function () {
    doit();
}, false);

document.addEventListener("mozfullscreenchange", function () {
    doit();
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    doit();
}, false);

它会在每次进入或者退出全屏的时候，触发doit（）操作。

赞 (0)

相关推荐

  • javascript fullscreen全屏实现代码

    <script type="text/javascript" language="javascript"> function fullscreen() { win = window.open("Main.aspx","_blank","resizable=yes;status=yes;toolbar=no;location=no;menubar=no;directories=no;scrollbars=n

  • javascript实现控制浏览器全屏

    功能很简单,代码也很简洁,这里就不多废话了 function fullScreen() { var el = document.documentElement, rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen, wscript; if(typeof rfs != "undefined" && rfs)

  • JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍

    复制代码 代码如下: // 判断各种浏览器,找到正确的方法function launchFullscreen(element) {  if(element.requestFullscreen) {    element.requestFullscreen();  } else if(element.mozRequestFullScreen) {    element.mozRequestFullScreen();  } else if(element.webkitRequestFullscree

  • javascript full screen 全屏显示页面元素的方法

    一种最简单的方式,就是动态改变你想要全屏显示的部件的style,例如position变成absolute,height和width都设置成窗口大小,并且把背景颜色改成全白(为了遮住页面上其余的元素).这样网页上就只能看到你要突出的部件了,视觉上就等同于全屏.同时利用javascript监听键盘事件,一旦用户按了ESc退出键,就恢复原来的样子.部分代码如下: 复制代码 代码如下: document.onkeydown = function (event) {        var e = even

  • JavaScript控制浏览器全屏显示简单示例

    JavaScript控制浏览器全屏显示简单示例

    本文实例讲述了JavaScript控制浏览器全屏显示.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • Android 实现全屏显示的几种方法整理

    Android 实现全屏显示的几种方法整理 A.设置主题实现全屏 直接在AndroidManifest.xml文件中设定Activity主题为全屏模式 android:theme="@android:style/Theme.NoTitleBar.Fullscreen" B.代码实现全屏 代码实现需要分两步做,如下: 1.隐藏标题栏 requestWindowFeature(Window.FEATURE_NO_TITLE); 2.隐藏状态栏 getWindow().setFlags(Wi

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

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

  • js模拟F11页面全屏显示

    本文实例为大家分享了js模拟F11页面全屏显示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试全屏</title> </head> <body> <button id='btn'>全屏按钮</button> <

  • JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

    HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScreen() 作用:请求某个元素element全屏 Document.getElementById("myCanvas").requestFullScreen() 这里是将其中的元素ID去请求fullscreen 退出全屏 document.cancelFullScreen() Document

  • js全屏显示显示代码的三种方法

    第一种:       在已经打开的一个普通网页上,点击"全屏显示",然后进入该网页对应的全屏模式.方法为:在网页的<body>与</body>之间加入以下代码: 复制代码 代码如下: <form><input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location,

  • Android App实现闪屏页广告图的全屏显示实例

    目录 1. 适配长屏幕的全面屏 2. 适配刘海屏或者水滴屏 凹形屏幕的显示模式 1. 适配长屏幕的全面屏 至于全屏展示,就得做适配工作,有以下两种方式可进行适配: 在 Android 8.0(API 26)及更高版本中,我们可以在 标签中使用 android:MaxAspectRatio 来声明其支持的屏幕最大宽高比. 比如我们可以声明最大宽高比为 2.4: <!-- Render on full screen up to screen aspect ratio of 2.4 --> <

  • Openlayers实现地图全屏显示

    本文实例为大家分享了Openlayers实现地图全屏显示的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建一个div标签,用来作为地图加载的容器: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

  • 原生javascript实现的全屏滚动功能示例

    本文实例讲述了原生javascript实现的全屏滚动功能.分享给大家供大家参考,具体如下: 原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度 2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题. 废话不多说,直接上代码 html代码: <div id="wrap"> <div id="main" style="top: 0;"> <div class="content num

随机推荐