您的位置：首页 > 编程技术 > js  >  javascript全屏显示页面元素的方法

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

 更新时间：2013年10月3日 13:48  点击：3119

一种最简单的方式，就是动态改变你想要全屏显示的部件的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等浏览器都兼容的全屏功能的。如果有谁知道的话，还请分享一下，感激不尽。

 

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

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

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

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

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

[!--infotagslink--]

相关文章

  • Android判断当前屏幕是全屏还是非全屏

    在安卓开发时我碰到一个问题就是需要实现全屏，但又需要我们来判断出用户是使用了全屏或非全屏了，下面我分别找了两段代码，大家可参考。 先来看一个android屏幕全屏实...2016-09-20

  • 原生js实现类似fullpage的单页/全屏滚动

    这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法，文中给出了完整的实例代码，相信对大家的理解和学习具有一定的参考价值，需要的朋友们可以参考借鉴，下面来一起看看吧。...2017-01-26

  • C#实现窗体全屏的两种方法

    这篇文章主要为大家详细介绍了C#实现窗体全屏的两种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • HTML5在手机端实现视频全屏展示方法

    这篇文章主要介绍了HTML5在手机端实现视频全屏展示方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-08

  • 用html5 js实现点击一个按钮达到浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google chrome 15 +, safri5.1+,...2014-05-31

  • MFC实现全屏功能代码实例

    这篇文章主要介绍了MFC实现全屏功能的代码,对于学习MFC有一定的借鉴价值,需要的朋友可以参考下...2020-04-25

  • iOS实现视频播放全屏和取消全屏功能

    这篇文章主要为大家详细介绍了iOS实现视频播放全屏和取消全屏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-30

  • SpringBoot实战项目之谷歌浏览器全屏效果实现

    这篇文章主要介绍了通过 Java SpringBoot来实现谷歌浏览器的全屏效果，希望页面展示时可以实现全屏效果以提高用户体验。感兴趣的小伙伴跟着小编往下看吧...2021-09-20

  • android设置全屏与取消全屏方法

    在android开发中设置全屏有常用的两种方法，一种是通过程序设置，另一种是在配置文件里修改(AndroidManifest.xml)下面我来介绍一下。 android提供了两种方式来实现无...2016-09-20

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

    这篇文章主要介绍了JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件的相关资料,需要的朋友可以参考下...2015-12-21

  • 实现浏览器全屏窗口的几种方法

    IE 浏览器隐身　　浏览网页，时常会发现自己的浏览器窗口不见了，但网页内容还在。这种效果是不是很神奇呢？实现此种功能只要有三种原理，按实现方法的不同，给它们各起...2016-09-20

  • C#窗体全屏功能实例代码

    简要介绍窗体全屏的方法，列出实现窗体的全屏功能以及全屏功能的快捷键的代码,需要的朋友可以参考下...2020-06-25

  • Android实现布局全屏

    这篇文章主要为大家详细介绍了Android实现布局全屏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-08

  • jquery实现全屏滚动

    这篇文章主要介绍了jquery实现全屏滚动，针对全屏滚动知识进行详细阐述，感兴趣的小伙伴们可以参考一下...2015-12-29

  • 美图看看怎么全屏 全屏方法详解

    今天小编在这里就来给美图看看的这一款软件的使用者们来说一说全屏的方法，各位想知道具体方法的使用者，那么下面就快来跟着小编一起看一看方法吧。 给各位美图看看...2016-09-14