作者：孙东国

标准参考

Form 标记内 action 属性用于定位表单提交的 URL 地址, 具体信息请参考 HTML 4.01 规范 17.3 The FORM element - action 中的内容。

target 属性用于决定 FORM 标记内表单数据的提交窗口目标，具体信息请参考 HTML 4.01 规范 6.16 Frame target names 中的内容。

submit button 可用于提交当前表单，他可以由 INPUT BUTTON 标记创建，具体信息请参考 HTML 4.01 规范 17.2.1 Control types submit-button 中的内容。

HTMLFormElement 的 submit 方法用于表单提交，具体信息请参考 DOM Level-2 规范 Interface HTMLFormElement 中的内容。

问题描述

一个表单在一些特定的情况下，在 Chrome Safari 中不能够重复提交。

造成的影响

本问题将点击“提交表单”按钮后在 Chrome Safari 下无反应。

受影响的浏览器

Safari Chrome

问题分析

Safari 中，满足如下条件时，FORM 不能够重复提交：

1. FORM 的 "target" 属性设置为 "_blank"。
2. FORM 成功提交后，到再次提交前，其 action 属性的值没有发生变化。
3. FORM 成功提交后，到再次提交前，该页内未发生键盘事件。

Chrome 中，满足如下条件时，FORM 不能够重复提交：

1. FORM 的 "target" 属性设置为 "_blank"。
2. FORM 成功提交后，到再次提交前，其 action 属性的值没有发生变化。
3. FORM 成功提交后，到再次提交前，该页内未发生键盘事件。
4. FORM 在 IFRAME 中被引入 。

注：
经测试，FORM 成功提交后，到再次提交前，在文本框中按下 Enter 键提交表单，则可以正常提交。第一次成功提交后，按下任意键，再次提交即可成功。
另外，“提交”可以是点击一个提交按钮，也可以是调用该 FORM 的 submit 方法。

分析以下代码：

<form target="_blank" action="http://www.google.cn/search"
                method="get"> <input type="text" name="q" value="">
                <input type="submit" value="Search"/> </form>

上述代码符合条件1，先输入 google ，然后点击 Search ，会弹出新页面，返回原页面，同时未发生键盘事件，再次点击 Search 时，在 Safari 和其他浏览器结果如下：

Safari	其他浏览器
没有弹出新页面	弹出新页面

在 iframe 中引入上述代码，又会有什么效果呢？看如下代码：

iframe.html

<iframe width="250" height="25" frameborder="0"
                scrolling="no" marginheight="0" marginwidth="0"
                src="form.html"></iframe>

form.html

<form target="_blank" action="http://www.google.cn/search"
                method="get"> <input type="text" name="q" value="">
                <input type="submit" value="Search"/> </form>

重复上述步骤，在 Safari Chrome 和其他浏览器结果如下：

Safari Chrome	其他浏览器
没有弹出新页面	弹出新页面

解决方案

• 每次提交表单后都修改 action 属性内的 URL（加入时间戳）。
• 修改 FORM 的 "target" 属性为非 "_blank" 。
• 重复提交前触发键盘事件。
• 使用 ENTER 键进行重复提交。

参见

知识库

• ...

相关问题

• ...