java - GWT 上传表单导致浏览器返回卡住 Chrome 中的页面

Question

我们在 GWT 中有一个用于上传文件的上传表单。上传文件的时候没问题，但是如果我们连续上传两个以上的文件，然后点击浏览器的后退按钮，就会出现奇怪的事情。页面消失，最终自行重新加载，然后卡住。在重新加载之前，没有按钮是可点击的。这发生在 Chrome 39 中，但我试过的其他浏览器(以及旧版本的 firefox)中没有。

为什么表单面板提交会做那样的事情？我该如何解决？我似乎找不到从历史记录中删除表单提交的方法，或者不使用 GWT 的 FormPanel 和 FileUpload 上传文件的简单方法。我无法在每次上传文件后重新加载页面，因为刷新速度非常慢。

下面是创建面板相关部分的代码:

FormPanel uploadForm = new FormPanel();
uploadForm.setEncoding(FormPanel.ENCODING_MULTIPART);
uploadForm.setMethod(FormPanel.METHOD_POST);
uploadForm.setAction(servletPath + destinationUrl);

FileUpload fileInput = new FileUpload();
uploadForm.add(fileInput.asWidget());

当用户点击上传所选文件时，我们使用:

uploadForm.submit();

GWTUploadProject不是解决方案，因为可以说它的效果更差。如果您在上传到他们的 examples page 后尝试点击返回, 它会显示之前上传图片的额外缩略图!

Answer 1

当您创建一个新的 FormPanel 时，它还会创建一个 Frame 以便在提交表单时将表单的输出发送给它而不更改当前页面.

问题是浏览器将焦点放在这个 iframe 上，发生了使用浏览器历史记录，这进入了这个 iframe 重新触发提交事件。

这里有不同的选择:

• 上传完成后，将 ChangeHandler 移除到您的 FileUpload。
• 从页面中删除 FormPanel 并在每次上传时创建一个新的。
• 分离 FormPanel 的 Frame 并在上传后重新附加它，以便从历史堆栈中删除它。这是一个很大的 hack，但如果您想再次重用同一面板，这可能是唯一的 hack，这是 gwtupload 中使用的方法。图书馆。

reatachIframe(uploadForm);

private native static void reatachIframe(FormPanel form) /*-{
  var i = form.@com.google.gwt.user.client.ui.FormPanel::synthesizedFrame;
  var o = i.onload;
  i.onload = undefined;
  var p = i.parentElement;
  p.removeChild(i);
  p.appendChild(i);
  i.onload = o;
}-*/;