javascript - 将 HTML 表单发布到 iframe 会导致浏览器历史记录出现问题

Question

我有一个包含常规输入和文件输入的 HTML 表单。当用户选择一个或多个文件上传时，我立即将表单的 target 属性更改为页面上隐藏的 iframe 的 name 属性，并更改表单的 action 属性到我要将文件上传请求发送到的脚本。

根据请求的脚本，我将文件上传到服务器，一旦脚本结束，iframe 的 onload 事件就会触发，之后我会进行各种界面更改。

一切都正确上传，但问题是 iframe 请求似乎导致页面请求被添加到浏览器历史记录中，这会产生意想不到的后果。我目前发现了以下两个问题:

1. 如果我上传一个文件，紧接着上传另一个文件，然后点击后退按钮，浏览器停留在表单上而不是继续返回到表单之前显示的页面。
2. 如果我上传一个文件然后点击后退按钮，浏览器更正返回上一页，但如果我然后点击前进按钮返回表格，因为无论出于何种原因，在 iframe 中执行的用于上传文件的脚本会在加载表单时立即调用，这会导致其他意想不到的副作用。

重点是，似乎将 iframe 请求添加到浏览器历史记录会导致各种问题，我想尽可能避免这种情况。有什么办法可以阻止这一切的发生吗？

我还应该指出，我目前只在最新版本的 Chrome 中进行开发，但无论我使用什么解决方案都必须回到 IE8。

Answer 1

以下是针对您的错误的一些解释

• > Rerendering components with iframe leads to browser history duplicates

  The navigation events of the iframe (change its src attribute in this case) are propagated up to the parent window as well.

• 这是一个完整的演示，并解释了这个奇怪的错误。 Back Button Behavior on a Page With an iframe
• > 3-reasons-why-you-should-not-use-iframes

  Reason #2: iFrames cause usability issues The iFrame tag is notorious for creating usability annoyances. Among most common of them are:

  * it tends to break the "Back" button in the browser being used;
  * it confuses visually impaired visitors, using screen readers;
  * it confuses users, suddenly opening the iframe content in a new browser window;
  * content within the iframe doesn't fit in and looks odd because it can ignore the styles sheets from within the main website;
  * content within the iframe is missing since the source URL changed; and,
  * navigation of the site in the iframe stops working.