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

Question

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

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

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

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

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

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

Answer 1

以下是关于您的错误的解释

• 使用iframe重新提交组件会导致浏览器历史记录重复

  iframe的导航事件（在本例中更改其src属性）也会传播到父窗口。

• 这里有一个完整的演示和解释这个奇怪的错误。带有iframe的页面上的后退按钮行为
• 三个理由——你应该怎么做——不应该做——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并在完成后删除它。