浏览器前进后退时表单状态的保持

相关文章:
向你推荐浏览器中妈妈辈:opera
JSI API之BrowserInfo、EventUtil讨论
精通JavaScript DOM事件

推荐圈子: D语言
更多相关推荐 先说一下各浏览器默认下,表单回退时的现象:

除过ff以为,其余浏览器都会保存表单的状态,
ff加<meta http-equiv="Cache-Control" CONTENT="private,must-revalidate"> 以后也保存状态成功

Cache-Control取值有如下几个:public,private,no-cache,no-store,no-transform,must-revalidate,proxy-revalidate,max-age

Cache-Control属于http1.1范畴,主流浏览器都支持http1.1,但是貌似只有FF遵守"Cache-Control".

如果想保留表单状态,基本<meta http-equiv="Cache-Control" CONTENT="private,must-revalidate">就可以.

如果想重置表单,射雕兄写过一个方法如下:
1. Safari 和 Opera 是两个极端,一个完全还原,一个完全保留。
2. Firefox 下最简单的办法是设置 autocomplete = ‘off’ 属性。(ff2下无效)
3. IE 必须在 setTimeout 中还原表单值才有效。
4. Chrome 除了不支持 onpageshow, 其它表现和 Firefox 一致。


各浏览器响应Cache-Control如下:

在回退和前进时:
Cache-Control为no-store时:
FF: 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......(如果想重置表单的话)

补充本人所用浏览器: IE7, FF3.5.1, safari4.0.2, opera10 beta, chrome2
模态对话框与浏览器后退键的协同设计原理 模态对话框是Web应用中高频使用的交互组件,其核心挑战在于如何与浏览器原生后退机制协同工作。从技术本质看,后退键触发的是history栈的popstate事件,而非键盘事件;模态框是否响应后退,取决于其状态归属类型——路由驱动型需URL参数映射、历史快照型依赖pushState精准控制、状态托管型则应主动隔离。这种分层设计保障了SPA中用户操作的一致性与可预测性,支撑电商结算、SaaS表单编辑、无障碍浏览等关键场景。本文深入解析三类模态框的历史栈治理策略,覆盖React Router集成、<dialog>兼 阅读详情

相关推荐

巧妙规避360浏览器表单重复提交警告:利用history.pushState实现无刷新URL更新

本文针对360浏览器在表单提交后刷新页面时出现的‘确认重新提交表单’警告,提供了专业的解决方案。通过深入解析HTML5的history.pushState API,详细阐述了如何在不刷新页面的前提下,无感更新浏览器URL,从而有效切断历史记录与表单提交的关联,彻底规避该警告,提升用户体验。

code8的博客 658

浏览器后退不刷新问题

最近在写博客,当从文章也返回时页面中的浏览次数没有更新(后端数据已更新), 因为浏览器有缓存,如果是整个页面,可添加几个meta标签。如下 &amp;lt;META HTTP-EQUIV=&quot;pragma&quot; CONTENT=&quot;no-cache&quot;&amp;gt; &amp;lt;META HTTP-EQUIV=&quot;Cache-Control&quot; CONTENT=&quot;n

KeBo's Blog 1879

Android 面试题 Handler篇

1.Handler的实现原理。

ViewHandKownHealth的博客 955

解决浏览器回退不刷新

可以通过监听onpageshow来刷新页面。代码如下,在页面的JS中添加 //后退不执行JS的问题 window.onpageshow = function(event) {   if (event.persisted) {     window.location.reload();   } }; event.persisted为了查看页面是直接从服务器上...

weixin_30628077的博客 539

汇川EASY系列之以太网通讯(套接字socket做主站)

本文讲解汇川Easy系列使用以太网套接字socket通讯,本例中EasyPLC做主站。文中按步进行操作。细节明确。

这是一个长期关注工控行业技术的博客,实现0-1的突破,期待您的关注和留言 2191

java写一个多人线上聊天室

课程作业谔谔

weixin_51614848的博客 1136

浏览器后退checkbox未刷新的问题

在 type='checkbox' 所属的 input 组件中添加:autocomplete="off", 即: <input type='checkbox' autocomplete="off"></input>

Hua_Dudu的博客 440

ISP Tuning实战指南:从基础到高级的色彩与亮度优化

本文详细介绍了ISP Tuning的基础概念与高级调优技术,包括黑电平校正(BLC)、自动白平衡(AWB)、色彩校正矩阵(CCM)和Gamma曲线调整等核心算法。通过实战案例和调试技巧,帮助工程师提升摄像头成像质量,解决高光过曝、暗部噪点等常见问题,适用于智能门铃、车载摄像头等多种场景。

weixin_30879169的博客 108

网页后退不刷新的N种解决方案

转自网页后退不刷新的N种解决方案 正常在需要做页面后退操作时,可以通过调用history对象的go方法和back方法来控制页面后退, window.history.go(-1); window.history.back(); 复制代码但是在部分移动端浏览器及webview中,页面实现了后退但是并没有刷新,而是使用了缓存。 这里总结了几种强制回退页面后刷新上一页的方法。 方案一:主动跳转至来源页 ...

weixin_34402090的博客 4522

基于车牌识别的停车收费系统的设计与实现(源码+开题)

本系统(程序源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景: 随着城市化进程的加速和汽车保有量的增加,停车难成为了一个普遍存在的问题。传统的停车收费方式存在着效率低下、管理混乱等问题。因此,开发一款基于车牌识别的停车收费系统具有重要的现实意义。研究意义: 基于车牌识别的停车收费系统可以有效地解决传统停车收费方式在效率和准确性方面的问题,提高停车服务的效率和质量。

迟限程序设计 1392

AI驱动的研发流程:定义高度专业和系统化的规划基准

在人工智能(AI)浪潮席卷全球的今天,软件研发的范式正经历着一场深刻而迅速的变革。AI技术的渗透,从最初的辅助工具角色,正逐步演变为驱动整个研发流程的核心引擎。传统的研发流程和项目管理方法论,在面对AI带来的高效率、高智能以及高复杂性挑战时,显得力不从心。企业对快速交付高质量软件产品、有效控制风险、并保证全流程可追溯性的需求日益迫切。

形上得其象,形下合于数;阴阳自济,玄理自明。 2181

InstantClick历史记录管理:如何正确处理浏览器前进后退

InstantClick是一个强大的JavaScript库,能够让你的网站链接点击实现即时加载效果,显著提升用户体验。但是在实际使用过程中,很多开发者会遇到浏览器前进后退功能失效的问题。本文将详细介绍如何正确处理InstantClick的历史记录管理,让你的网站既拥有极速体验,又保持完整的浏览器导航功能。 ## 为什么需要历史记录管理? 当你使用InstantClick实现页面无刷新加载时,浏

gitblog_01109的博客 586

终于找到两个稳定好用的Docker镜像加速源,拉取速度提升几十倍!

国内使用Docker经常遇到镜像拉取慢、超时失败的问题🐳 本文分享两个亲测好用的免费镜像加速源⚡ 实测拉取速度从十几分钟缩短到几十秒,稳定性接近100%📊 支持一键配置脚本,支持多平台使用✨

XiaoqiangClub的博客 952

AJAX:如何处理书签和后退按钮

本文将展示一个开源JavaScript库,该脚本库给AJAX应用程序带来了书签和后退按钮支持。在学习完这个教程后,开发人员将能够获得对一个AJAX问题的解决方案(甚至连Google Maps和Gmail现在都不提供该解决方案):一个强大的、可用的书签和后退前进功能,其操作行为如同其他的Web应用程序一样。 简单示例下载完整源代码。示例二下载OReilly Mail源代码。  本文将阐述目前A

银狐的专栏 906

PCL 基于超体素的点云分割【2024最新版】

点云超体素分割原理介绍、代码实现以及如何做到将每一个超体素内的点进行单独保存而不造成点云缺失的方法。博客长期更新,本文最近一次更新时间为:2024年12月29日。

点云侠的博客 36万+

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

用Javascript实现多步后退,并能保持前面的输入的值不变

在做项目时,客户提出这样的一个要求,在多个表单输入操作下,前后表单有相应的逻辑关系,在后面的表单,想查看前面的表单输入情况。这种情况下,想起了history,这个对象说明如下 :       history有三个方法:       back() 后退,跟按下“后退”键是等效的

踏雪无痕 1412

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

vue判断当前是哪个页面_js判断当前页面在history记录中是前进过来的还是后退过来的...

需求是这样的,ABC三个页面,A→B→C,A页面是个主页,B页面是个列表页,C页面是个详情页。列表页前往详情页再返回后,需要列表页浏览位置保留在去详情页之前的位置,而主页前往列表页的时候不需要保留最小位置。这个问题与本文标题有啥关系呢,请看下文据我测试,有的网页不作任何处理,也能在返回的时候自动保留位置呢。这种情况有个必备条件,就是必须使用网页默认的滚动条(document.documentEle...

weixin_34260071的博客 3916

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

CANN HcPre 融合算子解析:mHC 结构前处理 custom.npu_hc_pre 与 npu_hc_pre_v2 实战指南

HcPre 是 CANN 推理优化样例中面向 mHC(Manifold-Constrained Hyper-Connections)架构的前处理融合算子,它在单个算子内完成 InvRms 归一化、混合系数投影(MatMul)与 Sinkhorn 迭代三类计算,并通过 `npu_hc_pre` / `npu_hc_pre_v2` 两个自定义算子接口暴露给 PyTorch 侧。本文以 [custom-

gitblog_00124的博客 471

网页开发:如何用JS检测用户是否通过后退按钮进入页面?

在网页开发中,准确判断用户是否通过浏览器后退按钮进入页面,对于提升用户体验和数据处理至关重要。这不仅关系到页面状态的恢复,还能避免重复提交等常见问题。理解并实现这一功能

2501_93902246的博客 448

如何处理书签和后退按钮

 如何处理书签和后退按钮  本文将展示一个开源JavaScript库,该脚本库给AJAX应用程序带来了书签和后退按钮支持。在学习完这个教程后,开发人员将能够获得对一个AJAX问题的解决方案(甚至连Google Maps和Gmail现在都不提供该解决方案):一个强大的、可用的书签和后退前进功能,其操作行为如同其他的Web应用程序一样。   本文将阐述目前AJAX应用程序在使用书签和后退按钮方面所

shuidingdang的专栏 621

解决Vue3 SPA导航痛点:vue-page-stack让页面切换如丝般顺滑

vue-page-stack是一款专为Vue3单页应用设计的导航管理器,它能像原生应用一样管理页面栈而不是简单销毁页面,有效解决了传统SPA应用中页面状态丢失、切换卡顿等常见问题。 ## 为什么需要vue-page-stack? 在传统的Vue单页应用开发中,使用KeepAlive组件虽然能缓存页面,但存在无法按导航顺序管理页面、相同路由复用缓存导致状态混乱等问题。而vue-page-stac

gitblog_01107的博客 457

AJAX技巧:如何处理书签和后退按钮

     本文将展示一个开源JavaScript库,该脚本库给AJAX应用程序带来了书签和后退按钮支持。在学习完这个教程后,开发人员将能够获得对一个AJAX问题的解决方案(甚至连Google Maps和Gmail现在都不提供该解决方案):一个强大的、可用的书签和后退前进功能,其操作行为如同其他的Web应用程序一样。   本文将阐述目前AJAX应用程序在使用书签和后退按钮方面所面临的严重问题;展示R

放飞梦想 842

[转]AJAX:如何处理书签和后退按钮

时间:2006-05-26 作者:Brad Neuberg 浏览次数: 2086 1422 本文关键字:AJAX, javascript, dom, bookmark, forward button, back button, 历史记录, 书签, 前进按钮, 后退按钮, 表示层 文章工具   本文将展示一个开源JavaScript库,该脚本库给AJAX应用程序带来了书签和后退按钮支持...

wiley 170

JS后退功能详解:为何重要?如何实现?提升用户体验指南

在日常网页开发中,处理浏览器的后退行为是一个常见但有时令人头疼的问题。无论是构建单页应用还是传统多页网站,理解如何控制后退按钮,能显著提升用户体验,避免意外操作带来的困扰。下面

2509_93883384的博客 274
上一篇: 关于ORACLE时间格式的讨论
下一篇: 替换^M字符
enet_java
博客等级 码龄21年 20粉丝 14原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值