细节致上之(浏览器后退操作时,表单状态的还原)
从事这行当多年,对于表单提交后失败返回保留先前表单中的信息这点小需求,一直不当回事。给这事折磨过自已几回去,才拿出来当回事。
下面来讲讲浏览器默认下,表单回退时的现象:
除过Firefox以为,其余浏览器都会保存表单的状态:
Firefox加 以后也保存状态成功
Cache-Control取值有如下几个:public,private,no-cache,no-store,no-transform,must-revalidate,proxy-revalidate,max-age
Cache-Control属于http1.1范畴,主流浏览器都支持http1.1,但是貌似只有Firefox遵守“Cache-Control”。
如果想保留表单状态,基本就可以.
总结:
1. Safari 和 Opera 是两个极端,一个完全还原,一个完全保留。
2. Firefox 下最简单的办法是设置 autocomplete = ‘off’ 属性。(ff2下无效)
3. IE 必须在 setTimeout 中还原表单值才有效。
4. Chrome 除了不支持 onpageshow, 其它表现和 Firefox 一致。
各浏览器响应Cache-Control如下:
在回退和前进时:
Cache-Control为no-store时:
firefox: onload,DOMContentLoaded,页面执行代码和onpageshow都会被调用,否则只调用onpageshow(页面状态会被完美保留,类似于safari)
一种例外情况就是添加unload,有unload事件时,不管Cache-Control为何值,onload,DOMContentLoaded,页面执行代码和onpageshow都调用.
IE有没有no-store,onload都会被调用.没有onpageshow事件.
表单状态保留
chrome和IE一样.
safari:无论Cache-Control为何值,都不会触发任何onload,DOMContentLoaded,页面执行代码,(有一种例外情况,当有unload事件时,onload,DOMContentLoaded,页面执行代码都会执行)
另外,safari虽然不触发 onload,DOMContentLoaded,页面执行代码.但是页面当前状态会被完美保留(就像在两个标签页之间切换一样自然)
表单状态保留
opera:
opera和其他浏览器不同之处,每次在地址栏敲回车都算一次跳转,虽然url没变,但是历史记录却有了(刷新没事)...
Cache-Control 无论为何值,都不会触发onload,DOMContentLoaded,页面执行代码...window.onfoucs不执行
总结一句话,忘掉opera......(如果想重置表单的话)
----------------
以上技术引述网络,本人边理解边抄。哈~~
当前共有0条评论,我也要发表: