网站可以强制浏览器进入全屏模式吗？

Question

我想进行心理学研究,参与者必须查看大图像.

该实验在Web上完成,因此在浏览器窗口中完成.是否可以告诉浏览器进入全屏,例如按下按钮？

我知道有可能打开一个固定大小的弹出窗口.你认为这是一个可行的替代方案吗？如果,最好的方法是什么？是否有优雅的方法来检测弹出窗口阻止程序,回退并在原始浏览器窗口中运行研究.

主要关注的是本研究的参与者不熟悉技术细节,不应该被他们打扰.

Answer 1

您可以告诉用户按F11.在它旁边,放一个'为什么？' 链接并解释为什么你觉得他们需要处于全屏模式.

我不认为你可以强制浏览器全屏显示,事实上,如果你能够做到这一点,我会对我的浏览器感到愤怒.这太侵入了.即使Flash具有安全性,因此强制插件进入全屏需要事件源于用户交互.因此,如果它对您来说很重要,这可能是使用Flash插件的一个很好的理由,因为您可以将go-fullscreen调用附加到一个误导按钮,即"开始测验"(或其他).

但是,请不要这样做.与用户直接对话并告诉他们点击F11.

编辑:我刚刚尝试了另一条评论中提供的示例代码,我很高兴地说Firefox打开了一个带有地址栏的最大化窗口,而不是全屏窗口.

Answer 2

没有办法将当前窗口调整为全屏,但您可以全屏打开弹出窗口:

<script type="text/javascript">
<!--
function popup(url) 
{
 params  = 'width='+screen.width;
 params += ', height='+screen.height;
 params += ', top=0, left=0'
 params += ', fullscreen=yes';

 newwin=window.open(url,'windowname4', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>

<a href="javascript: void(0)" 
   onclick="popup('popup.html')">Fullscreen popup window</a>

Answer 3

我在搜索后找到了一些代码.

function fullscreen() {
    var element = document.getElementById("content");
    if (element.requestFullScreen) {
        if (!document.fullScreen) {
            element.requestFullscreen();
            $(".fullscreen").attr('src',"img/icons/panel_resize_actual.png");
        } else {
            document.exitFullScreen();
            $(".fullscreen").attr('src',"img/icons/panel_resize.png");
        }

    } else if (element.mozRequestFullScreen) {

        if (!document.mozFullScreen) {
            element.mozRequestFullScreen();
            $(".fullscreen").attr('src',"img/icons/panel_resize_actual.png");
            google.maps.event.trigger(map, 'resize');
        } else {
            document.mozCancelFullScreen();
            $(".fullscreen").attr('src',"img/icons/panel_resize.png");
        }

    } else if (element.webkitRequestFullScreen) {

        if (!document.webkitIsFullScreen) {
            element.webkitRequestFullScreen();
            $(".fullscreen").attr('src',"img/icons/panel_resize_actual.png");
            google.maps.event.trigger(map, 'resize');
        } else {
            document.webkitCancelFullScreen();
            $(".fullscreen").attr('src',"img/icons/panel_resize.png");
        } 
    } 
}

它将使用html5 api.我用jquery切换了一张特殊图片.希望能有所帮助.目前,我不知道你是否可以强迫它,因为它是被迫保护的.