窗口.当我选择留在页面上时，Onbeforeunload不起作用

Question

我有一个xhtml页面的文件上传:

<p:fileUpload fileUploadListener="#{ContentRepositoryExplorerBean.upload}" 
              update="formId" dragDropSupport="true" multiple="true"/>

，我需要为用户做确认对话框，例如，当他按下"退出"我所做的是:

<script>
        var flag = false;
        function setFlag(v) {
            flag = v;
        }
        function getWarningMessage() {
            if(flag == true) {
                window.onbeforeunload = function() {
                    return 'Please do not leave this page until upload is done';
                }
            }
        }
        $('#logout').click(function() {
            getWarningMessage();
        });
</script>

和添加到fileUpload的onstart和oncomplete

<p:fileUpload fileUploadListener="#{ContentRepositoryExplorerBean.upload}"
   update="formId" dragDropSupport="true" multiple="true"
   onstart="setFlag(true)" oncomplete="setFlag(false)"/>

但是当我选择留在页面上时，我的上传没有显示在它应该显示的列表中。如有任何建议，请参考

Answer 1

可以在上传过程中显示对话框

创建对话框(在主表单之外):

<p:dialog widgetVar="statusDialog" modal="true" draggable="false"  header="Loading please wait.........."
            closable="false" resizable="false" showHeader="false">
            <p:outputLabel value="Uploading file..."></p:outputLabel>
        </p:dialog>

将p:fileUpload更改为

<p:fileUpload fileUploadListener="#{ContentRepositoryExplorerBean.upload}"
   update="formId" dragDropSupport="true" multiple="true"
  onstart="PF('statusDialog').show();" 
  oncomplete="PF('statusDialog').hide();"/>

现在，如果用户上传，那么它将显示一个弹出文本消息。

Answer 2

通过修改脚本来修复这个问题:

<script type="text/javascript" >
        var flag = false;
        function setFlag(v) {
            flag = v;
        }
        $(document).ready(function() {
            var onclickFunc = new Function($('#logout').attr('onclick'));
            $('#logout').on("click", function(event){
                if(flag == true) {
                    event.stopImmediatePropagation();
                    alert("Please do not leave this page until upload is done");
                }
            }).click(onclickFunc).removeAttr('onclick');
        })
    </script>