首页 > 程序开发 > web前端 > HTML/CSS >

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

2016-08-20

用Html5orJS实现点击一个按钮达到浏览器全屏效果。

点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果

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

全屏

var docElm = document.documentElement;

//W3C 

if (docElm.requestFullscreen) { 

  docElm.requestFullscreen(); 

}

//FireFox 

else if (docElm.mozRequestFullScreen) { 

  docElm.mozRequestFullScreen(); 

}

//Chrome等 

else if (docElm.webkitRequestFullScreen) { 

  docElm.webkitRequestFullScreen(); 

}

//IE11

else if (elem.msRequestFullscreen) {

 elem.msRequestFullscreen();

}

退出全屏

 if (document.exitFullscreen) { 
document.exitFullscreen(); 
} 
else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} 
else if (document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen(); 
} 
else if (document.msExitFullscreen) { 
document.msExitFullscreen(); 
} 

事件监听

document.addEventListener("fullscreenchange", function () { 
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false); 

document.addEventListener("mozfullscreenchange", function () { 
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false); 

document.addEventListener("webkitfullscreenchange", function () { 
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false); 
document.addEventListener("msfullscreenchange", function () { 
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false); 

全屏样式设置

在浏览器全屏的使用我们还可以进行样式设置

html:-moz-full-screen { 
background: red; 
} 

html:-webkit-full-screen { 
background: red; 
} 

html:fullscreen { 
background: red; 
} 


在手机等移动设备上,很多内置的浏览器会缩放页面,为了是页面全屏无缩放,需要在页面的head部分加如下代码:

附录

1 一个在线的Demo

http://robnyman.github.io/fullscreen/

2 HTML5全屏API之网络钓鱼

http://www.36ria.com/5807

3 jquery封装的全屏插件

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

4 更加详细的全屏API介绍

4.1https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

4.2https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

5 HTML5全屏API在FireFox/Chrome中的显示差异

http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/

浏览器全屏的JS代码实现

方法一:该方法是从一个网上的效果看到不错,然后自己就拿来下来实验了一下,还是比较满意度,下面直接给出代码




<script type="text/javascript">

(function(a, b) {
    "use strict";
    var c = function() {
        var a = [["requestFullscreen", "exitFullscreen", "fullscreenchange", "fullscreen", "fullscreenElement"], ["webkitRequestFullScreen", "webkitCancelFullScreen", "webkitfullscreenchange", "webkitIsFullScreen", "webkitCurrentFullScreenElement"], ["mozRequestFullScreen", "mozCancelFullScreen", "mozfullscreenchange", "mozFullScreen", "mozFullScreenElement"]];
        for (var c = 0,
        d = a.length; c < d; c&#43;&#43;) {
            var e = a[c];
            if (e[1] in b) return e
        }
    } ();
    if (!c) return a.screenfull = !1;
    var d = "ALLOW_KEYBOARD_INPUT" in Element,
    e = {
        init: function() {
            return b.addEventListener(c[2],
            function(a) {
                e.isFullscreen = b[c[3]],
                e.element = b[c[4]],
                e.onchange(a)
            }),
            this
        },
        isFullscreen: b[c[3]],
        element: b[c[4]],
        request: function(a) {
            
            a = a || b.documentElement,
            a[c[0]](d && Element.ALLOW_KEYBOARD_INPUT),
            b.isFullscreen || a[c[0]]();
            //alert("dd");
        },
        exit: function() {
            b[c[1]]()
        },
        toggle: function(a) {
            this.isFullscreen ? this.exit() : this.request(a)
        },
        onchange: function() {}
    };
    a.screenfull = e.init()
})(window, document)

</script>
正在加载...
<script type="text/javascript"> function ck() { screenfull && screenfull.request(); }; // 在这里写你的代码... var loading = document.getElementById('loading'); loading.style.cursor = 'pointer'; loading.innerHTML = '点击开始'; loading.onclick = ck </script>

上面的代码很简单,功能主要是在head中的script脚本代码---并且是经过我格式化后的代码,在body中的代码只是去调用。

说明:没有实验成功在页面打开的时候就直接全屏,不知道为什么必须要绑定到某个对象的onclick事件上来调用?

下面的是最开始未格式化的代码,应该是压缩过的

<script type="text/javascript">
(function(a,b){"use strict";var c=function(){var a=[["requestFullscreen","exitFullscreen","fullscreenchange","fullscreen","fullscreenElement"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitfullscreenchange","webkitIsFullScreen","webkitCurrentFullScreenElement"],["mozRequestFullScreen","mozCancelFullScreen","mozfullscreenchange","mozFullScreen","mozFullScreenElement"]];for(var c=0,d=a.length;c

具体怎么用,你就自己斟酌使用

================================================================================

方法二:

这个方法和方法一很类似,也是我从网上找来的,用来一下效果也还不错。


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

<script language="JavaScript"> document.getElementById("btn").onclick=function(){ var elem = document.getElementById("content"); var h1 = document.getElementById("h1"); requestFullScreen(elem);// 某个页面元素 //requestFullScreen(document.documentElement);// 整个网页 }; 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>

说明:没有实验成功在页面打开的时候就直接全屏,不知道为什么必须要绑定到某个对象的onclick事件上来调用?

参考出处:

http://www.2cto.com/kf/201410/346205.html

================================================================================

方法三:这个方法有点牵强,我感觉其实就是指的最大化,你自己可以试试代码,并且我都做了一些说明


<script language="javascript">
//ps:这是实现屏幕最大化  方法一
function openwin_max(url){
    var scrWidth=screen.availWidth;
    var scrHeight=screen.availHeight;
    var self=window.open(url,"PowerBOS","resizable=1");
    self.moveTo(-4,-4);
    self.resizeTo(scrWidth&#43;9,scrHeight&#43;9);
}
// ps:这是实现窗口最大化  方法二
function openwin_full(url) {
    var scrWidth=screen.availWidth;
    var scrHeight=screen.availHeight;
    var opt='top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,fullscreen=1';  
    var self = window.open(url, "aaaa", opt);
    //var self=window.open(url,"PowerBOS","resizable=1");
    self.moveTo(0,0);
    self.resizeTo(scrWidth,scrHeight);
}
</script><script>

window.moveTo(0,0);        
window.resizeTo(screen.availWidth,screen.availHeight); 
window.outerWidth=screen.availWidth;        
window.outerHeight=screen.availHeight;    
//这是实现屏幕最大化! 方法三
function fullScreen(){
var opt='top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no';  
//window.open(document.location, 'aaa', 'fullscreen')
window.open(document.location, "aaa", opt);
}

</script>

这个网页特代码实现了浏览器的最大化完全全屏

关闭方法: 按键盘 alt+f4 不过对于火狐浏览器不能完全全仍然显示地址栏和关闭按钮。

O(&cap;_&cap;)O哈哈~

网上有很多人说要将第三中方式的方法写到body的onload事件中可以实现页面在载人的时候就显示最大化 :如

我测试下来是有点问题的:

①:window.open(document.location, &#39;&#39;, &#39;fullscreen&#39;)在该方法的第二个参数如果为空,在body的onload事件中是一个open指定页面的死循环的调用打开,也就是说会无限制的打开一个新的窗口,你可以自己测试,注意你的任务管理器的性能选项卡中CPU的变化。

②:如果给出window.open方法的第二个参数,例如:window.open(document.location, &#39;aaa&#39;, &#39;fullscreen&#39;),则在body的onload事件中调用的的时候也是死循环,只是都是同一个页面窗口而已,你可以自己测试,注意你的任务管理器的性能选项卡中CPU的变化。

以上出现的问题,希望有兴趣的朋友自己研究下,并告诉我最好的解决方案

相关文章
最新文章
热点推荐