Question

我搜索了类似的主题，在我的jsf应用程序中添加全屏选项。我尝试添加“https://stackoverflow.com/a/11820717/1194553”和“https://stackoverflow.com/a/7525760/1194553” 解决方案进入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>

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

然而，当我按下按钮时，视图以全屏模式显示，并立即返回正常模式，无需等待任何咔嗒声等。虽然这个动作发生的时间不到一秒钟，但是当我仔细观察时，我才能意识到。

我该如何解决这个问题？

Answer 1

您需要像这样添加return false;：

onclick="requestFullScreen(document.body);return false;"

停止点击的传播，因此停止表单提交。

不相关：

如果您没有使用任何JSF功能，则不需要<h:commandButton />。一个简单的<input type="button" onclick="..." />。这只是性能略有提升的问题。您可以在JSF中使用纯HTML。这与<h:panelGroup />大致相同，我不会滥用它们，如果没有必要，我会使用<span />或<div />

如何将全屏功能添加到JSF应用程序

1 个答案: