JS的IE和Firefox兼容性汇编<转>

1.document.form.item 问题
(1)现有问题：
现有代码中存在许多 document.formName.item("itemName")这样的语句，不能在 MF 下运行
(2)解决方法：
改用 document.formName.elements["elementName"]
(3)其它
参见 2

2.集合类对象问题
(1)现有问题：
现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
(2)解决方法：
改用 [] 作为下标运算。如：document.forms("formName") 改为document.forms["formName"]。
又如：document.getElementsByName("inputName")(1) 改为document.getElementsByName("inputName")[1]

3.window.event
(1)现有问题：
使用 window.event 无法在 MF 上运行
(2)解决方法：
MF 的 event只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在IE中运行)：

...

新代码(可在IE和MF中运行)：

...

此外，如果新代码中第一行不改，与老代码一样的话(即gotoSubmit调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案tpl 部分仍与老代码兼容。

4. HTML 对象的 id作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
用 getElementById("idName") 代替 idName作为对象变量使用。

5.用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 eval_r(idName) 可以取得 id 为 idName 的 HTML 对象，在MF中不能。
(2)解决方法
用 getElementById(idName) 代替 eval_r(idName)。

6. 变量名与某 HTML对象 id 相同的问题
(1)现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML对象 id 相同的变量名，IE 中不能。
(2)解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
(3)其它
参见 问题4

[NextPage]

7. event.x 与event.y 问题
(1)现有问题
在IE 中，event 对象有 x, y 属性，MF中没有。
(2)解决方法
在MF中，与event.x 等效的是 event.pageX。但event.pageXIE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。

如果要完全一样，可以稍麻烦些：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
(3)其它
event.layerX 在 IE 与 MF中都有，具体意义有无差别尚未试验。

8. 关于frame
(1)现有问题
在 IE中 可以用window.testFrame取得该frame，mf中不行
(2)解决方法
在frame的使用方面mf和ie的最主要的区别是：
如果在frame标签中书写了以下属性：

那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
ie：window.top.frameId或者window.top.frameName来访问这个window对象
mf： 只能这样window.top.frameName来访问这个window对象

另外，在mf和ie中都可以使用window.top.document.getElementByIdx("frameId")来访问frame标签
并且可以通过window.top.document.getElementByIdx("testFrame").src =‘xx.htm’来切换frame的内容
也都可以通过window.top.frameName.location =‘xx.htm’来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
以及/test/js/test_frame/目录下面的测试
----adun 2004.12.09修改

9.在mf中，自己定义的属性必须getAttribute()取得

10.在mf中没有parentElement parement.children 而用parentNodeparentNode.childNodes
childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName_r()来回避这个问题。
当html中节点缺失时，IE和MF对parentNode的解释不同，例如

MF中input.parentNode的值为form,而IE中input.parentNode的值为空节点

MF中节点没有removeNode方法，必须使用如下方法node.parentNode.removeChild(node)

11.const问题
(1)现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32;在IE中这是语法错误。
(2)解决方法:
不使用 const ，以 var 代替。

12. body对象
MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

13. urlencoding
在js中如果书写url就直接写&不要写&例如var url =‘xx.jsp?objectName=xx&objectEvent=xxx’;
frm.action =url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的&

14. nodeName 和tagName 问题
(1)现有问题：
在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在IE 中，nodeName 的使用好象
有问题（具体情况没有测试，但我的IE已经死了好几次）。
(2)解决方法：
使用 tagName，但应检测其是否为空。

15. 元素属性
IE下 input.type属性为只读，但是MF下可以修改

2006/6/28 14:04 |添加评论 | 固定链接 | 引用通告 (0) | 写入日志
js常用代码
event.clientX 返回最后一次点击鼠标X坐标值；
event.clientY 返回最后一次点击鼠标Y坐标值；
event.offsetX 返回当前鼠标悬停X坐标值
event.offsetY 返回当前鼠标悬停Y坐标值
document.write(document.lastModified) 网页最后一次更新时间
document.οndblclick=x 当双击鼠标产生事件
document.οnmοusedοwn=x 单击鼠标键产生事件
document.body.scrollTop;返回和设置当前竖向滚动条的坐标值，须与函数配合,
document.body.scrollLeft;返回和设置当前横向滚动务的坐标值，须与函数配合，
document.title document.title="message"; 当前窗口的标题栏文字
document.bgcolor document.bgcolor="颜色值"; 改变窗口背景颜色
document.Fgcolor document.Fgcolor="颜色值"; 改变正文颜色
document.linkcolor document.linkcolor="颜色值";改变超联接颜色
document.alinkcolor document.alinkcolor="颜色值";改变正点击联接的颜色
document.VlinkColor document.VlinkColor="颜色值";改变已访问联接的颜色
document.forms.length 返回当前页form表单数
document.anchors.length 返回当前页锚的数量
document.links.length 返回当前页联接的数量
document.οnmοusedοwn=x 单击鼠标触发事件
document.οndblclick=x 双击鼠标触发事件
defaultStatus window.status=defaultStatus;将状态栏设置默认显示
function function xx(){...} 定义函数
isNumeric 判断是否是数字
innerHTML xx=对象.innerHTML 输入某对象标签中的html源代码
innerText divid.innerText=xx将以div定位以id命名的对象值设为XX
location.reload(); 使本页刷新，target可等于一个刷新的网页
Math.random()随机涵数,只能是0到1之间的数,如果要得到其它数,可以为*10,再取整
Math.floor(number) 将对象number转为整数，舍取所有小数
Math.min(1,2) 返回1,2哪个小
Math.max(1,2) 返回1,2哪个大
navigator.appName 返回当前浏览器名称
navigator.appVersion 返回当前浏览器版本号
navigator.appCodeName 返回当前浏览器代码名字
navigator.userAgent 返回当前浏览器用户代标志
onsubmit οnsubmit="return(xx())" 使用函数返回值
opener opener.document.对象 控制原打开窗体对象
prompt xx=window.prompt("提示信息","预定值"); 输入语句
parent parent.框架名.对象 控制框架页面
return return false 返回值
random 随机参数（0至1之间）
reset() form.reset(); 使form表单内的数据重置
split("") string.split("") 将string对象字符以逗号隔开
submit() form对象.submit() 使form对象提交数据
String对象的 charAt(x)对象 反回指定对象的第多少位的字母
lastIndexOf("string") 从右到左询找指定字符，没有返回-1
indexOf("string") 从左到右询找指定字符，没有返回-1
LowerCase() 将对象全部转为小写
UpperCase() 将对象全部转为大写
substring(0,5) string.substring(x,x) 返回对象中从0到5的字符
setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象
toLocaleString() x.toLocaleString()从x时间对象中获取时间，以字符串型式存在
typeof(变量名)检查变量的类型，值有：String,Boolean,Object,Function,Underfined
window.event.button==1/2/3鼠标键左键等于1右键等于2两个键一起按为3
window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度
window.resizeTo(0,0) 将窗口设置宽高
window.moveTo(0,0) 将窗口移到某位置
window.focus() 使当前窗口获得焦点
window.scroll(x,y)窗口滚动条坐标，y控制上下移动，须与函数配合
window.open() window.open("地址","名称","属性")
属性:toolbar(工具栏),location(地址栏),directions,status(状态栏),
menubar(菜单栏),scrollbar(滚动条),resizable(改变大小),width(宽),height(高),fullscreen(全屏),scrollbars(全屏时无滚动条无参数,channelmode(宽屏),left(打开窗口x坐标),top(打开窗口y坐标)
window.location = 'view-source:' + window.location.href应用事件查看网页源代码;

a=new Date();//创建a为一个新的时期对象
y=a.getYear(); //y的值为从对象a中获取年份值 两位数年份
y1=a.getFullYear(); //获取全年份数 四位数年份
m=a.getMonth(); //获取月份值
d=a.getDate(); //获取日期值
d1=a.getDay(); //获取当前星期值
h=a.getHours(); //获取当前小时数
m1=a.getMinutes(); //获取当前分钟数
s=a.getSeconds(); //获取当前秒钟数

对象.style.fontSize="文字大小";
单位：mm/cm/in英寸/pc帕/pt点/px象素/em文字高
1in=1.25cm
1pc=12pt
1pt=1.2px(800*600分辩率下)
文本字体属性：
fontSize大小
family字体
color颜色
fontStyle风格，取值为normal一般,italic斜体,oblique斜体且加粗
fontWeight加粗,取值为100到900不等,900最粗,light,normal,bold
letterSpacing间距,更改文字间距离,取值为,1pt,10px,1cm
textDecoration:文字修饰;取值,none不修饰,underline下划线,overline上划线
background:文字背景颜色,
backgroundImage:背景图片,取值为图片的插入路径

点击网页正文函数调用触发器：
1.onClick 当对象被点击
2.onLoad 当网页打开,只能书写在body中
3.onUnload 当网页关闭或离开时,只能书写在body中
4.onmouseover 当鼠标悬于其上时
5.onmouseout 当鼠标离开对象时
6.onmouseup 当鼠标松开
7.onmousedown 当鼠标按下键
8.onFocus 当对象获取焦点时
9.onSelect 当对象的文本被选中时
10.onChange 当对象的内容被改变
11.onBlur 当对象失去焦点
οnsubmit=return(ss())表单调用时返回的值
直线 border-bottom:1x solid black
虚线 border-bottom:1x dotted black
点划线 border-bottom:2x dashed black
双线 border-bottom:5x double black
槽状 border-bottom:1x groove black
脊状 border-bottom:1x ridge black

1.边缘高光glow(color=颜色,strength=亮光大小)

2.水平翻转fliph()使对象水平翻转180度

3.垂直翻转flipv()使对象垂直翻转180度

4.对象模糊blur(add=true/false direction=方向strength=强度)
add指定是否按印象画派进行模糊direction模糊方向strength模糊强度
5.对象透明alpha(opaction=0-100,finishopacity=0-100,style=0/1/2/3)
opaction对象整体不透明值finishopacity当对象利用了渐透明时该项指定结束透明位置的不透明值style指定透明方式0为整体透明，1为线型透明，2为圆型透明，3为矩形透明
6.去除颜色chroma(color=颜色值)使对象中颜色与指定颜色相同区域透明
7.建立阴影dropshadow(color=阴影颜色,offx=水平向左偏离像素,offy=水平向下偏离像素)
8.去色gray()使对象呈灰度显示
9.负片效果invert()使对象呈底片效果
10.高光light()使对象呈黑色显示
11.遮盖mask(color=颜色)使整个对象以指定颜色进行蒙板一次
opacity 表透明度水平.0~100,0表全透明,100表完全不透明
finishopacity表想要设置的渐变透明效果.0~100.
style 表透明区的形状.0表统一形状.1表线形.2表放射形.3表长方形.
startx.starty表渐变透明效果的开始时X和Y坐标.
finishx,finishy渐变透明效果结束时x,y 的坐标.
add有来确定是否在模糊效果中使有原有目标.值为0,1.0表"否",1表"是".
direction设置模糊的方向.0度表垂直向上,45度为一个单位.默认值是向左270度.left,right,down,up.
strength只能用整数来确定.代表有多少个像素的宽度将受到模糊影响.默认是5个.
color要透明的颜色.
offx,offy分别是x,y 方向阴影的偏移量.
positive指投影方式.0表透明像素生成阴影.1表只给出不透明像素生成阴影..
AddAmbient:加入包围的光源.
AddCone:加入锥形光源.
AddPoint加入点光源
Changcolor:改变光的颜色．
Changstrength:改变光源的强度．
Clear:清除所有的光源．
MoveLight:移动光源．
freq是波纹的频率，在指定在对象上一区需要产生多少个完事的波纹．
lightstrength可对于波纹增强光影的效果．显著0~100正整数，正弦波开始位置是0~360度．0表从0度开始，25表从90度开始．
strength表振幅大小．

handstyle="cursor:hand"
crosshair style="cursor:crosshair"
text style="cursor:text"
wait style="cursor:wait"
default style="cursor:default"
help style="cursor:help"
e-resize style="cursor:e-resize"
ne-resize style="cursor:ne-resize"
n-resize style="cursor:n-resize"
nw-resize style="cursor:nw-resize"
w-resize style="cursor:w-resize"
s-resize style="cursor:s-resize"
sw-resize style="cursor:sw-resize "
se-resize style="cursor:se-resize"
auto style="cursor:auto"

2006/6/24 15:45 |添加评论 | 固定链接 | 引用通告 (0) | 写入日志 | 计算机与Internet
web交互界面易用性设计和验收的指导性原则
随着企业intranet和国际internet的迅速发展，越来越多的工作流程，商务交易，教育、培训、会议和讲座，以及个人消费娱乐都被转移到所谓的万维网（WorldWideWeb，以下简称WEB）上来了。与此相对应的是交互操作的复杂性越来越高。

随着Browser/Server模式的日渐流行，很多操作都是在浏览器环境下的网页上完成的，并不是只有失效的链接和意外的出错才会使操作者感到烦恼，即便是一次完整的成功操作过程，也可能因为操作的繁复性过高或者使用上的不方便而给操作者带来不愉快的体验。

本文试图阐述WEB交互页面设计的一些指导性原则，这些原则有利于避免发生不愉快的操作体验。这些原则是用户友好性的，是在完成同一种操作要求下，使用户最感到轻松、简单、舒适的WEB交互界面设计原则。我们假定我们讨论的WEB页面都是功能正常的，符合美学观点的。需要说明我们讨论的原则可能会和设计上的美学观点以及既有的功能设计有所冲突。如果发生这种情况，基于“实用的就是美的”观点，我们会建议您酌情放弃原先的美学观点与功能设计。

1．输入控件的自动聚焦和可用键盘切换输入焦点

使用JavaScript实现页面加载完成后立即自动聚焦(focus)到第一个输入控件。可用TAB键（IE缺省实现）或方向键切换聚焦到下一个输入控件。

输入控件指WEB页面表单(
)中显式的，需要用户进行修改、编辑操作的表单元素。对于这些控件，如果没有自动聚焦操作，不可避免的出现一次用户鼠标定位操作（如果用户此前处于键盘输入操作状态或鼠标定位后需要进行键盘输入操作，实际上是键盘鼠标切换操作）。如果鼠标定位后需要进行键盘输入操作，如果不能键盘切换输入焦点，那么不可避免的在切换输入焦点时需要反复的键盘鼠标切换操作，这是很繁琐的。

如果实现了页面加载完成即自动聚焦到第一个输入控件，并且可以键盘切换输入焦点标定位操作，那么对于用户来说整个页面的输入操作可能都不需要鼠标操作，或次数较少，这是一种便利。毕竟频繁的键盘鼠标切换操作是比较累人的。

对于有输入栏的对话框或网页，在不干预的情况下就应将当前控制焦点定位在待输入的输入栏上；如果输入栏在一般情况下不需要更改其中的内容，则应直接将焦点定在“确定”按钮上；在几个输入栏之间应支持tab，shift+tab切换操作，“确定”和“取消”应该是切换操作的终点，与具体所在位置无关。

2． 可用Enter（或Ctrl＋Enter）键提交，确保和点击提交按钮的效果是相同的

不要在提交按钮上加入onClick=”…”这样的JavaScript代码。

用Enter键提交页面是原则1的自然延伸，而且这也是浏览器所缺省支持的。只所以单独列出来是因为实际上有些设计者设计的页面不能达到这种效果，结果导致使用Enter键提交和点击“确定”按钮提交带来的效果不一样。大部分情况下是设计者在“确定”按钮上加入了onClik=”…”这样的代码，通过点击“确定”按钮后，会执行一段JavaScript代码，比如对某些hidden类型的input元素设值。而使用Enter键提交时就不会执行这段代码。

正确的做法是把这段代码移到表单标签中，以onSubmit=”…”属性引入。

对于表单元素，它会消耗Enter键，因此会使得Enter键提交失效。可以引入JavaScript代码捕捉Ctrl+Enter复合键，一旦捕捉到即执行表单的submit()方法。对于需要频繁提交的场合，比如BBS上，这种代码是很有必要的。<BR><BR> <BR><BR>3． 鼠标动作提示和回应<BR><BR><BR>对用户的鼠标定位操作，当移动到可响应的位置上时，应给予视觉或听觉的提示。<BR><BR><BR>动作回应的最简单形式就是鼠标ICON变成手状。浏览器只对具有href属性的HTML标签会自动进行这种变换ICON的行为。对于没有href属性（或没有设置href属性）的标签，可以通过JavaScript设置style属性的cursor为hand。<BR><BR>目标区域发生变化是更为主动的响应形式。当鼠标指针移到目标区域，此时指针图形改变或文字颜色发生改变均能较大的减轻用户搜索定位目标区域的注意力负担。在按钮上增添直观的图形，尽可能的增大按钮面积；按钮间保持适当的距离，太近增加了用户区别它们之间界限以防误操作的负担，太远增加了用户搜索定位按钮的负担。<BR><BR><BR><BR><BR><BR>4．尽可能早的在客户端完成输入数据合法性验证<BR><BR><BR>输入数据的合法性检验应该在客户端使用JavaScript进行验证。除非验证只能在服务器端完成，否则验证工作应在最早能完成的情况下进行。<BR><BR><BR>在客户端完成数据合法性验证，可以避免一次服务器请求和回复通讯，这种通讯是需要用户等待的，如果用户等待很长时间后从服务器返回的结果提示出现的错误是在输入时即可发现的，那么这种设计就是不友好的。诸如密码长度限制，用户名允许字符限制等等，显然应该在客户端提交前就应该进行验证。<BR><BR><BR><BR><BR><BR>5．根据应用场景决定在表单页面和提交后返回页面间是否使用中间过渡页面<BR><BR><BR>根据应用场景，决定是否显示接收表单页面（表单页面和提交后返回页面间的中间过渡页面），以及使用何种方式显示接收表单页面。<BR><BR><BR>表单页面和接收表单页面是大部分WEB交互操作赖以实现的配合模式。关于表单页面和接收表单页面的相互关系的设计，要做如下几个方面的考虑。<BR><BR>一，对于需要频繁操作的场合，从操作便利和快捷性出发，尽可能的减少服务器和客户端交互次数，应该避免使用中间过渡页面。提交完毕直接返回原来的表单页面或默认页面。在这种情况下要考虑到数据安全和可恢复性。<BR><BR>如果因为用户输入的数据不合格，需要重新输入，那么，去除中间页面，把错误信息直接显示在原表单页面上的设计方式，将是最简洁的处理方式。用户只需要根据错误提示进行更正即可。当然这样做稍微增加了编程负担。在表单接收页面上需要包含原表单页面的内容，而且输入数据项都必须用服务器端代码或客户端JavaScript设置成用户输入的值。为了开发快捷，可以这样做：表单页面和接收表单页面用同一个服务器端脚本页面实现。这个页面按如下流程完成原来两个页面的工作：<BR><BR>页面脚本初始化<BR><BR>┃<BR><BR>检查“提交”变量是否设置<BR><BR>┠已设置，做数据验证<BR><BR>┃ ┠验证通过－>业务逻辑处理－>使用包含页面方式或重定向方式返回到特定页面<BR><BR><BR>┃ ┗验证不通过－>保存用户输入的数据－>退出表单提交处理到表单页面流程中<BR><BR>┗未设置，做表单页面流程，如有来自提交流程中产生的用户输入数据，则显示出来<BR><BR><BR>其中，使用包含页面方式返回到特定页面可以避免一次客户端重定向过程，比客户端重定向过程还要快捷和稳定一些。但是有些情况下因为代码变量冲突或其他原因，使用包含页面方式可能并不方便，这时候可以使用服务器端重定向技术，在ASP里是Server.Transfer方法，在JavaServlet里是RequestDispatcher.forward()方法。不要使用Response.Redirect或者HttpServletResponse.sendRedirect()这种客户端HTTP重定向方法。不使用中间过渡页面也就意味着用户不能后退浏览原先已经填好的表单页面，因为使用的是同一个URL。所以在验证不通过情况下保存用户输入的数据就是必不可少的。<BR><BR><BR>不使用中间过渡页面带来的另一个问题就是使用包含页面方式或服务器端重定向方式返回会使得URL和页面内容不能一一对应。对于用户可能会直接用这个URL（会收藏这个URL）访问返回页面的情况，他会发现实际上到达的是表单页面，不是他想要的那个返回结果页面。所以，去除中间过渡页面，确实会带来URL和内容含混不清的情况，因而不适合需要URL和页面内容一一对应的场合。<BR><BR><BR>二，从技术角度考虑，使用中间过渡页面能保证URL和页面内容一一对应，简化页面开发工作。<BR><BR><BR>为了保证页面内容总是和固定的URL联系起来，必须使用客户端重定向：<BR><BR><BR> 提交 业务逻辑处理 （中间过渡页面）<BR><BR><BR>表单页面――――－>接收表单页面―――――――――>显示处理结果―――>客户端重定向到特定页面<BR><BR><BR>客户端重定向分几种情况：1，使用HTTPHeader重定向，Location:<A href="http://www.netall.com.cn/"><U><FONTcolor=#0000ff>http://www.netall.com.cn</FONT></U></A>，这种定向是最快的，在窗口一片空白的情况下就迅速访问（GET）另一个页面。这种方式实际上不能显示处理结果，只能说是向第一种快速重定向方式的一种折衷处理；2,HTML标签刷新，<METAHTTP-EQUIV="Refresh"CONTENT="5;URL=http://www.netall.com.cn">，这种定向比较友好，在这个页面加载完毕后访问另一个页面。很多设计者把这个作为一个技巧使用，在载入一个大页面前放置一个缓冲页面以避免用户乏味的等待；3，JavaScript重定向。由于是用代码控制重定向，可以做的更灵活。比如根据用户习惯，控制操作完毕后的转向流程。4，被动式的重定向。在页面上放置按钮或链接，由用户手动决定返回到特定页面。这种情况适合于处理结果的显示页面包含相当多的信息，需要用户仔细浏览，而决定下一步的操作。<BR><BR><BR>在使用中间过渡页面的情况下，不能再使用页面过期失效了。否则一旦出现错误，需要用户重新输入表单数据，用户就不能用后退按钮恢复此前填写的表单数据了。除非设计者有意禁止这种恢复。<BR><BR><BR><BR><BR><BR>6．防止表单重复提交处理<BR><BR><BR>对提交按钮点击后做变灰处理避免在网络响应较慢情况下用户重复提交同一个表单。使用页面过期失效避免用户后退浏览重复提交表单。<BR><BR><BR>有些复杂的应用会导致需要较长时间的等待才会返回处理结果。而在较慢的网络环境中，这种情况更是频繁发生。焦急等待的用户往往会重复点击提交按钮。这种情况是设计者所不希望看到的。<BR><BR>使用JavaScript在点击提交按钮后使按钮失效变灰是一个最直接的办法（根据原则2这段代码应该放在<form>标签里onSubmit=”…”做）。此外，在表单页面上，用服务器端脚本设置HTTPHeader的Expires为立即过期可以保证用户没办法使用后退浏览恢复表单页面。注意这样做的代价可能是用户辛辛苦苦填写很长的内容，结果一旦操作失误就没法恢复。所以应该避免在包含<textarea>表单元素的页面上使用页面过期失效。<BR><BR>应该说，更严格的方法是，服务器端脚本就应该具备抵抗重复提交的能力。例如，为这个表单分配一个唯一ID或一个使用一次即失效的验证码。此外，这个表单处理还应具有事务性质，如果表单不被接受，所做的改变还是能恢复的。在金融应用场合，重复提交同一笔交易是肯定不被允许的。能在重复提交中获利的一方总是会想办法绕过浏览器的限制，所以不能依赖于客户端的技术。<BR><BR> <BR><BR>7．页面链接是打开新窗口、使用原窗口还是弹出窗口的原则<BR><BR><BR>一般而言，首页上链接可以使用target=”_blank”属性打开新窗口，而其他页面上的链接都应使用原窗口或弹出窗口。如果链接页面内容相对原页面来说不重要，是附属性质的，可以使用弹出窗口方式。<BR><BR><BR>一般情况下应该使用原窗口，把是否保留原窗口内容的权利留给用户。除非设计者相信原页面是如此重要，在用户发出点击指令后还有使用上的价值，以至于不能被随便更新或覆盖。一般来说，只有首页才会处于这样一个地位，用户在首页上打开一个链接后，一般还会在这个首页上去打开另一个链接。比如首页包含极多链接的门户网站，或者搜索引擎的搜索结果页面。Google.com以前的搜索结果页面上的链接是使用原窗口的，后来他们意识到用户会反复使用这个页面，而改成打开新窗口了。一般的网站如果首页链接不多，就不必使用新窗口，这是用户友好的设计原则。<BR><BR>上述情形的一个极端情况就是新页面内容比起原页面内容的重要性差很多，以至于都未必需要打开一个新页面。这时候使用弹出窗口比较合适。用JavaScript弹出窗口有好几种：一个是window.open()函数。这里有个技巧。应该使用window.open()先打开一个空白窗口，再使用location.replace()用目标页面替换。这样做可以避免在打开新页面的过程中导致原页面失去响应。Window.open()将打开一个新的浏览器窗口进程，因此资源消耗比较大。另一个是由微软DynamicHTML规范中扩充的方法createPopup()。createPopup()可以创建无边框的弹出窗口，消耗系统资源较小。还有一个就是用页面中隐藏的层<div>来模拟一个弹出页面。后两种可以使用JavaScript代码填充弹出窗口内容。如果需要下载网页作为其内容的话，需要微软DynamicHTML规范中的<download>标签。<BR></DIV