IE9 双表单提交问题
Posted
技术标签:
【中文标题】IE9 双表单提交问题【英文标题】：IE9 Double Form Submit Issue 【发布时间】：2011-11-26 12:17:52 【问题描述】：我只是想知道是否有人对我所处的情况有一些信息或反馈。 目前我面临一个“双重提交”问题，我点击一次“提交”按钮，然后提交了两次表格。这仅在 IE9 中发生，但我仅针对 Safari、Chrome（最新）、FF（版本 5/6）、IE8 和 IE9 进行了测试。
代码如下：
<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>IE9 test</title>
</head>
<body>
<h1>Testing</h1>
<form method="POST" id="submit_form">
<input type="text" name="x" value="xxxx" />
<input type="text" name="y" value="yyyy" />
<button type="submit" class="btn_sign_in" id="btn_logon" onclick="this.disabled=true;document.forms[0].submit();">Submit</button>
</form>
</body>
</html>
有问题的部分是：
onclick="this.disabled=true;document.forms[0].submit();"
代码已经在我的网站上很久了，这是我今年IE9才发布以来第一次遇到双重提交问题，可能这几天使用IE9的人越来越多，因此我收到了用户的投诉关于这个问题。
最难的部分是双重提交问题并不总是可重现的。有时会重复提交，有时会提交一次。
我目前的工作是从：
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
并更改为：
<meta http-equiv="X-UA-Compatible" content="IE=8" >
这会强制 IE9 使用 IE8 兼容性，它会正确执行 javascript 以进行提交。
我已致电 Microsoft 支持，他们声称这是一个“Javascript 兼容性问题”，因此我们需要微调我们的 Javascript 以使我们的网站在 IE9 下正常工作..（Duh！）
无论如何，是我的代码：
onclick="this.disabled=true;document.forms[0].submit();"
一开始就错了吗？因为即使其他浏览器没有抱怨，但可能这是不正确的开始？
我希望如果有人也面临类似问题，请提供更多信息或反馈。 目前，如果我不将 X-UA-Compatible 更改为 IE=8，我可以将代码更改为：
onclick="this.disabled=true;"
这也将解决双重提交问题，但是否还有我们应该注意的 IE9 兼容性问题列表？
谢谢！
【问题讨论】：
【参考方案1】：这段代码是错误的：
onclick="this.disabled=true;document.forms[0].submit();"
onclick Javascript 不保证正常提交也不会执行。为此，它需要返回 false，如下所示：
onclick="this.disabled=true;document.forms[0].submit(); return false;"
这种行为变化是 IE9 错误吗？这取决于，这可能取决于时间问题导致的法律行为。如果 DOM/Javacript 标准保证 document.submit() 是文档中所有执行的结束，这只是一个错误。我怀疑情况是否如此。
【讨论】：
感谢您的回答，刚刚救了我。你能解释一下为什么 IE 有这种行为吗？再次感谢。 在我看来这是一个错误，因为它也会在您省略 'type="submit"' 时发生。很高兴您的解决方案也可以使用。【参考方案2】：抽象出复杂性，问题似乎是 IE9 提交表单两次 当在 javascript 中触发提交事件时，单击一键。
总的来说，我发现这样做可以修复 IE9 双 表单提交问题：
（IE9双提交HTML失败）：
<input type="submit" />
（IE9 html 双重提交修复）：
<input type="submit" onclick="return false; " />
所以基本上，我正在使用事件侦听器 (click) 处理 javascript 中的表单提交（未显示），但在老式事件处理程序 (onclick) 上返回 false，即使您已经处理过，IE9 似乎也会自动调用它通过一个事件监听器。
我猜你可以在纯 javascript 中做同样的事情：
inputElement.onclick = function() return false; ;
但我没有测试它。
【讨论】：
【参考方案3】：既然你已经有了执行 .submit() 的代码，为什么不把按钮类型改为简单按钮而不是提交呢？
【讨论】：
是的，我知道更改将解决问题。但我的问题是它曾经适用于所有浏览器（至少是我们大部分时间使用的浏览器，IE8、FF、Chrome、Safari），但在 IE9 上行为不同...... 这就像在问“为什么 IE9 的行为不像我/我们预期的那样”。这真的没有意义。你今天发现的工作，它可以在下个月的任何浏览器补丁后中断。【参考方案4】：我不确定这是否是问题所在，但是，翻译成简单的英文后，您的代码似乎在说“单击提交按钮时，将 disabled 属性设置为 true，然后提交表单。”
但是，由于单击提交按钮已经提交了表单，因此您的浏览器可能会收到两个提交请求 - 一次是在您单击按钮时，第二次是在您的 javascript 告诉它提交时。
如果你不做 ajax，只是一个常规的提交，你应该能够return true 而不是调用submit - 本质上，告诉浏览器继续执行默认操作（即提交）。
或者说真的，完全杀死整个 submit() 部分，因为它是多余的。
【讨论】：
是的，我知道这不合逻辑，但我想说的是所有其他浏览器只提交一次，而在 IE9 上它有时会提交两次...... 好吧，每个浏览器都有自己的 JS 实现，所以在这样的边缘情况下，你会发现差异。最好的解决方案是始终使代码逻辑尽可能紧凑，然后才为异常编写代码。【参考方案5】：部分问题是我相信您提交了两次。您需要在开始第二个事件之前停止第一个事件。有关使用内联 javascript 停止事件的更多信息，请参阅此帖子：How to stop event propagation with inline onclick attribute?
【讨论】：
我知道代码可能一开始就不对。通过更改代码，我们可以通过删除 submit() 调用使其在 IE9 中正常工作，并且其他答案的建议也将解决它。我可能想问的是，是不是因为 IE9 使用了全新的 Javascript 引擎，并且一些原始行为会有所不同？ （这可能是一个愚蠢的问题），但是网络中是否有一个列表指定了一些 javascript 兼容性问题？【参考方案6】：当你使用时
onclick="document.forms[0].submit();"
在提交按钮上，写input type="button"而不是type="submit"，
【讨论】：
这确实对我有用。根据接受的答案我自己找到了它，但这在 IE 中也有效。我相信这个问题仍然取决于最新版本的 IE，即本评论中的 EDGE。另外，避免在 IE 中使用<button> 和 onclick，您可能会遇到同样的问题。【参考方案7】：
我们在 IE9 中遇到了同样的问题，我们通过将 event 的 cancelBubble 和 returnValue 标志分别设置为 true 和 false 解决了这个问题。
【讨论】：
请解释更多细节。以上是关于IE9 双表单提交问题的主要内容，如果未能解决你的问题，请参考以下文章