将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，并在完成后将其删除。