将 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

  iframe 的导航事件（在这种情况下更改其 src 属性）也会向上传播到父窗口。

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

  原因 #2：iFrame 导致可用性问题 iFrame 标签因造成可用性烦恼而臭名昭著。其中最常见的是：

  * 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.
  

Answer 2

我找到了问题和解决方案。问题是我在第一次加载表单时在表单页面上有一个 iframe，并且不知何故（我不知道为什么）导致了上述问题。

但是，我决定从页面加载中删除 iframe，而是在需要上传文件时通过 JS 动态创建 iframe。上传文件并触发 iframe onload 事件后，我通过 JS 从 DOM 中删除了 iframe，它不再导致上述问题。

老实说，我不太确定为什么这会解决问题，或者这是否只是浏览器的潜在问题，但对于任何想要使用 iframe 在表单上上传文件而不重新加载页面的人来说，都是确保首次加载时页面上没有 iframe，而是仅在需要时动态添加 iframe，并在完成后将其删除。