Javascript 如何向JSF应用程序添加全屏功能_Javascript_Jsp_Jsf_Fullscreen_Commandbutton

Javascript 如何向JSF应用程序添加全屏功能

javascript jsp jsf

Javascript 如何向JSF应用程序添加全屏功能,javascript,jsp,jsf,fullscreen,commandbutton,Javascript,Jsp,Jsf,Fullscreen,Commandbutton,我搜索了类似的主题，以便在jsf应用程序中添加全屏选项。我试图添加到“”和“” jsf应用程序的jsp文件中的解决方案，如 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib pr

我搜索了类似的主题，以便在jsf应用程序中添加全屏选项。我试图添加到“”和“” jsf应用程序的jsp文件中的解决方案，如

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Making Full Screen</title>
<script type="text/javascript">
    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}");
            }
        }
    }
    function requestFullScreen(el) {
        // Supports most browsers and their versions.
        var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;

        if (requestMethod) { // Native 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}");
            }
        }
        return false;
    }
</script>
</head>
<body>
    <f:view>    
        <h:form id="mainForm">
            <div>   
                <h:commandButton id="topBtn" styleClass="topMenuItem topMenuItem" image="images/common/fullScrUfa.png" onmouseover="this.src='images/common/fullScrFa.png'" onmouseout="this.src='images/common/fullScrUfa.png'" onclick="requestFullScreen(document.body);"></h:commandButton>
            </div>
        </h:form>
    </f:view>
</body>
</html>


全屏制作
功能取消全屏（el）{
var requestMethod=el.cancelFullScreen | el.webkitcancefullscreen | el.mozCancelFullScreen | el.exitFullscreen；
if（requestMethod）{//取消全屏显示。
requestMethod.call（el）；
}else if（typeof window.ActiveXObject！=“未定义”）{//IE。
var wscript=newActiveXObject（“wscript.Shell”）；
if（wscript！==null）{
SendKeys（“{F11}”）；
}
}
}
功能请求全屏（el）{
//支持大多数浏览器及其版本。
var requestMethod=el.requestFullScreen | el.webkitRequestFullScreen | el.mozRequestFullScreen | el.msRequestFullScreen；
if（requestMethod）{//本机全屏。
requestMethod.call（el）；
}else if（typeof window.ActiveXObject！=“未定义”）{//IE。
var wscript=newActiveXObject（“wscript.Shell”）；
if（wscript！==null）{
SendKeys（“{F11}”）；
}
}
返回false；
}

当我运行项目并单击id为“topBtn”的按钮时，我希望使浏览器视图全屏显示。我试过chrome vs.27.0.1453.116和explorer 10

但是，当我按下按钮时，视图以全屏模式显示，并立即返回到正常模式，无需等待任何单击或其他操作。虽然这个动作发生在不到一秒钟的时间里，但当我仔细看的时候，我能意识到

如何解决此问题？

您需要添加

返回false如下所示：
onclick="requestFullScreen(document.body);return false;"

要停止传播，请单击，然后停止表单提交
不相关：
如果不使用任何JSF函数性，则不需要
。一个简单的
。这只是一个性能稍好一点的问题。您可以在JSF中使用普通HTML。这与
差不多，我不会滥用它们，在没有必要的时候我会使用
或
您是否尝试过onclick=“requestFullScreen（document.body）；return false；“
，而且在您不调用任何操作或ajax时也不需要h:commandButton
。@Alexandre Lavoie-“return false；”解决了我的问题，谢谢！但是，如果“当您不调用任何操作或ajax时，您不需要h:commandButton”，您想说什么？实际上，在JSF项目中，h:commandButton用于创建一个按钮，为不知道键-F11功能的用户提供全屏选项。我现在明白了“您不需要h:commandButton”的意思。谢谢你的贡献。