Javascript - 防止在文件上传期间导航

Question

我有一个视频上传的vue组件，当他在视频上传过程中尝试导航时警告用户，他会丢失文件，如下所示：

 ready() { 
      window.onbeforeunload =() => { 
       if (this.uploading && !this.uploadingComplete && !this.failed) { 
        this.confirm('Are you sure you want to navigate away? Your video won't be uploaded if you do so!'); 
       } 
      } 
     } 

我正在使用sweetalert来提醒用户。但是，如何才能让它保持在同一页面上，并且在确认他想要离开之前阻止导航离开？

这是整个组件：

<script> 
    function initialState(){ 
     return { 
      uid: null, 
      uploading: false, 
      uploadingComplete: false, 
      failed: false, 
      title: null, 
      link: null, 
      description: null, 
      visibility: 'private', 
      saveStatus: null, 
      fileProgress: 0 
     } 
    } 
    export default { 
     data: function(){ 
      return initialState(); 
     }, 
     methods: { 
      fileInputChange() { 
       this.uploading = true; 
       this.failed = false; 

       this.file = document.getElementById('video').files[0]; 

       this.store().then(() => { 
        var form = new FormData(); 

        form.append('video', this.file); 
        form.append('uid', this.uid); 

        this.$http.post('/upload', form, { 
         progress: (e) => { 
          if (e.lengthComputable) { 
           this.updateProgress(e) 
          } 
         } 
        }).then(() => { 
         this.uploadingComplete = true 
        },() => { 
         this.failed = true 
        }); 
       },() => { 
        this.failed = true 
       }) 
      }, 
      store() { 
       return this.$http.post('/videos', { 
        title: this.title, 
        description: this.description, 
        visibility: this.visibility, 
        extension: this.file.name.split('.').pop() 
       }).then((response) => { 
        this.uid = response.json().data.uid; 
       }); 
      }, 
      update() { 
       this.saveStatus = 'Saving changes.'; 

       return this.$http.put('/videos/' + this.uid, { 
        link: this.link, 
        title: this.title, 
        description: this.description, 
        visibility: this.visibility 
       }).then((response) => { 
        this.saveStatus = 'Changes saved.'; 

        setTimeout(() => { 
         this.saveStatus = null 
        }, 3000) 
       },() => { 
        this.saveStatus = 'Failed to save changes.'; 
       }); 
      }, 
      updateProgress(e) { 
       e.percent = (e.loaded/e.total) * 100; 
       this.fileProgress = e.percent; 
      }, 
      confirm(message) { 
       swal({ 
       title: message, 
       text: null, 
       type: "warning", 
       showCancelButton: true, 
       cancelButtonText: "Cancel", 
       cancelButtonColor: '#FFF', 
       confirmButtonColor: "#2E112D", 
       confirmButtonText: "Yes, delete" 
       }).then(function(){ 
        this.$data = initialState(); 
       }.bind(this), function(dismiss) { 
       // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer' 
       if (dismiss === 'cancel') { // you might also handle 'close' or 'timer' if you used those 
       // ignore 
       } else { 
        throw dismiss; 
       } 
       }) 
      } 
     }, 
     ready() { 
      window.onbeforeunload =() => { 
       if (this.uploading && !this.uploadingComplete && !this.failed) { 
        this.confirm('Are you sure you want to navigate away? Your video won't be uploaded if you do so!'); 
       } 
      } 
     } 
    } 
</script> 

Answer 1

Mozilla的文档建议

window.onbeforeunload = function(e) { 
    var dialogText = 'Dialog text here'; 
    e.returnValue = dialogText; 
    return dialogText; 
}; 

，并指出：

自2011年5月25日，HTML5规范的状态，调用在此事件期间，window.alert（），window.confirm（）和window.prompt（）方法可能会被忽略。有关更多详细信息，请参阅HTML5规范。

Source包含许多其他有关原因和现代浏览器期望的细节。

This question似乎是你的副本。

This answer建议，以避免您应该设置处理程序，只有当它是为了防止一些奇怪的浏览器行为（也就是在导航的同时远离应触发一个确认对话框）

Answer 2

但我怎么能那么让它留在同一页面，并确认他想要离开之前阻止导航离开？

添加return false;停止活动。

if (this.uploading && !this.uploadingComplete && !this.failed) { 
     this.confirm("Are you sure you want to navigate away? Your video won't be uploaded if you do so!"); 
    return false; // <==== add this 
} 

return false;当你把它叫做3个独立的东西时：

event.preventDefault(); - 它停止浏览器的默认行为。

event.stopPropagation(); - 它可以防止事件传播（或“冒泡”）DOM。

停止callback执行并在调用时立即返回。