调用 h:commandButton 提交后关闭模式面板

Question

我正在尝试下载一个带有<h:commandButton> 的大文件，我想通过向用户显示“等待”模式来警告用户下载操作需要几秒钟/几分钟。

我的问题是我可以使用按钮的 onclick 事件显示图像，但我不知道在操作完成时如何隐藏它（这是显示下载文件的对话框弹出窗口时）。

我的代码是这样的：

<h:form id="form">

    <h:commandButton value="Download" 
        action="#{bean.downloadFile()}"
        onclick="showModal('waitModal')"/>

        <div id="waitModal" class="modal fade" tabindex="-1"
            role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        WAIT!
                    </div>
                </div>
            </div>
        </div>  

</h:form>

一个解决方案是在 bean 中使用一个标志并调用一个带有超时的 javascript 函数，该函数会检查标志的值并在下载完成时关闭模式，但这不是我想要的......它应该更通用，因为我必须在多个位置应用它

我知道有一些类似的问题，但我没有找到任何可以应用于我的问题的解决方案。

非常感谢！

Answer 1

PrimeFaces 用p:fileDownload 解决了您的问题。如果你不想使用 PrimeFaces，你至少可以看看他们是如何实现的。

PrimeFaces 将 cookie 设置为指示下载完成的响应。在客户端，他们使用window interval function，在单击下载按钮时注册。此函数以特定时间间隔检查提到的 cookie。如果设置了 cookie，它将被重置，间隔函数将被取消注册，并且将调用一个回调函数，您可以使用它来关闭对话框。

有关实现细节，请查看 PrimeFaces 的 core.js 中的 monitorDownload 方法和 p:fileDownload 的实现。

我认为它很容易实现，并且您可以很好地重复使用它。我认为没有其他更好的解决方案，因为文件下载需要整页请求（不是 ajax 请求），所以不能注册回调函数或类似的东西。