首页 新闻 搜索 专区 学院

怎么在浏览器中实现全屏(类似于按下F11键)

0
悬赏园豆:200 [已解决问题] 解决于 2014-11-05 12:32

在给公司做曲线,现在需要点击页面中的一个图标之后,让曲线全屏(隐藏地址栏菜单栏之类的,整个屏幕就只剩下曲线),IE,火狐,谷歌都得支持。

飞翔的33的主页 飞翔的33 | 初学一级 | 园豆:26
提问于:2014-11-05 09:54
< >
分享
最佳答案
0
收获园豆:170
dudu | 高人七级 |园豆:38823 | 2014-11-05 11:09

在这个博客里找到方法了,谢谢。

飞翔的33 | 园豆:26 (初学一级) | 2014-11-05 12:29
其他回答(2)
0

全屏

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.m**itFullscreen) {

      document.m**itFullscreen();

}

事件监听

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;  

}

收获园豆:20
gltide | 园豆:403 (菜鸟二级) | 2014-11-05 10:03

这个方法我试了下,不行啊。

支持(0) 反对(0) 飞翔的33 | 园豆:26 (初学一级) | 2014-11-05 10:08

@飞翔的33: <!DOCTYPE html>
<html>
<head>
    <title>FullScreen API</title>
    
    <style>
    body {
        background: #F3F5FA;
    }
    #container {
        width: 600px;
        padding: 30px;
        background: #F8F8F8;
        border: solid 1px #ccc;
        color: #111;
        margin: 20px auto;
        border-radius: 3px;
    }
    
    #specialstuff {
        background: #33e;
        padding: 20px;
        margin: 20px;
        color: #fff;
    }
    #specialstuff a {
        color: #eee;
    }
    
    #fsstatus {
        background: #e33;
        color: #111;
    }
    
    #fsstatus.fullScreenSupported {
        background: #3e3;
    }
    </style>
</head>
<body>
    <div id="container">
        <h1>FullScreen API Testing</h1>
        
        <div id="specialstuff">
            <p>Inside here is special stuff which will go fullscreen</p>
            <p>As of 10/20/2011, you'll need Safari 5.1, <a href="http://tools.google.com/dlpage/chromesxs">Chrome Canary</a>, or <a href="http://nightly.mozilla.org/">Firefox Nightly</a>
            <p>Status: <span id="fsstatus"></span>
        </div>
        
        <input type="button" value="Go Fullscreen" id="fsbutton" />
        
        <p>
            <a href="http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/">Back to article</a>
        </p>
    </div>
 
 
<script>
 
/*
Native FullScreen JavaScript API
-------------
Assumes Mozilla naming conventions instead of W3C for now
*/
 
(function() {
    var
        fullScreenApi = {
            supportsFullScreen: false,
            isFullScreen: function() { return false; },
            requestFullScreen: function() {},
            cancelFullScreen: function() {},
            fullScreenEventName: '',
            prefix: ''
        },
        browserPrefixes = 'webkit moz o ms khtml'.split(' ');
    
    // check for native support
    if (typeof document.cancelFullScreen != 'undefined') {
        fullScreenApi.supportsFullScreen = true;
    } else {    
        // check for fullscreen support by vendor prefix
        for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
            fullScreenApi.prefix = browserPrefixes[i];
            
            if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
                fullScreenApi.supportsFullScreen = true;
                
                break;
            }
        }
    }
    
    // update methods to do something useful
    if (fullScreenApi.supportsFullScreen) {
        fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
        
        fullScreenApi.isFullScreen = function() {
            switch (this.prefix) {    
                case '':
                    return document.fullScreen;
                case 'webkit':
                    return document.webkitIsFullScreen;
                default:
                    return document[this.prefix + 'FullScreen'];
            }
        }
        fullScreenApi.requestFullScreen = function(el) {
            return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
        }
        fullScreenApi.cancelFullScreen = function(el) {
            return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
        }        
    }
 
    // jQuery plugin
    if (typeof jQuery != 'undefined') {
        jQuery.fn.requestFullScreen = function() {
    
            return this.each(function() {
                var el = jQuery(this);
                if (fullScreenApi.supportsFullScreen) {
                    fullScreenApi.requestFullScreen(el);
                }
            });
        };
    }
 
    // export api
    window.fullScreenApi = fullScreenApi;    
})();
 
</script>
 
<script>
 
// do something interesting with fullscreen support
var fsButton = document.getElementById('fsbutton'),
    fsElement = document.getElementById('specialstuff'),
    fsStatus = document.getElementById('fsstatus');
 
 
if (window.fullScreenApi.supportsFullScreen) {
    fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
    fsStatus.className = 'fullScreenSupported';
    
    // handle button click
    fsButton.addEventListener('click', function() {
        window.fullScreenApi.requestFullScreen(fsElement);
    }, true);
    
    fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
        if (fullScreenApi.isFullScreen()) {
            fsStatus.innerHTML = 'Whoa, you went fullscreen';
        } else {
            fsStatus.innerHTML = 'Back to normal';
        }
    }, true);
    
} else {
    fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}
 
</script>
 
 
 
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount','UA-3734687-9']);
_gaq.push(['_trackPageview'],['_trackPageLoadTime']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
    
    
<script type="text/javascript">
    var clicky = { log: function(){ return; }, goal: function(){ return; }};
    var clicky_site_id = 117587;
    (function() {
        var s = document.createElement('script');
        s.type = 'text/javascript'; s.async = true;
        s.src = '//static.getclicky.com/js';
        ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
    })();
</script>
 
</body>
</html>
 
不支持ie

支持(0) 反对(0) gltide | 园豆:403 (菜鸟二级) | 2014-11-05 10:43
0

IE低版本不支持,这个也不能忍?

收获园豆:10
幻天芒 | 园豆:36652 (高人七级) | 2014-11-05 11:32

IE11就行

支持(0) 反对(0) 飞翔的33 | 园豆:26 (初学一级) | 2014-11-05 12:24

@飞翔的33: 所以不能纠结于低版本IE不支持。

支持(0) 反对(0) 幻天芒 | 园豆:36652 (高人七级) | 2014-11-05 12:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册