打印

BW5007: Chrome Safari 中的表单在某些情况下不能够重复提交

作者:孙东国

标准参考

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 键进行重复提交。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6
Chrome 6.0.495.0 dev
Safari 4.0.4
Opera 10.60
测试页面: iframe.html
form.html
本文更新时间: 2010-07-28

关键字

IFRAME FORM submit again 表单 重复提交