网页如何防止刷新重复提交与如何防止后退的解决方法 提交后禁用提交按钮（大部分人都是这样做的） 如果客户提交后,按F5刷新怎么办?...遗憾的是，答案非常简单：我们无法禁用浏览器的后退按钮。 起先我对于居然有人想要禁用浏览器的后退按钮感到不可思议。...后来，看到竟然有那么多的人想要禁用这个后退按钮，我也就释然（想要禁用的只有后退按钮，不包括浏览器的前进按钮）。因为在默认情况下，用户提交表单之后可以通过后退按钮返回表单页面（而不是使用“编辑”按钮！）...然而，由于这种方法不能适用于所有的浏览器，所以是不推荐使用的。但如果是在Intranet环境下，管理员可以控制用户使用哪种浏览器，我想还是有人会使用这种方法。 ...经过一番仔细的寻寻觅觅之后，我发现仍旧无法找出真正能够完全禁用浏览器后退按钮的办法。所有这里介绍的方法都能够在不同程度上、以不同的方式禁止用户返回前一页面，但它们都有各自的局限。
当然需要说明，这篇文章不是讲如何实现浏览器的，而是利用WPF的一个浏览器控件，让大家了解一下WPF的一些简单功能。由于WPF组件庞大，没办法在一篇文章中详细介绍。...可以指定上下左右中五个方位的组件。 Grid。网格布局，可以按照网格形式排列组件。 现在返回来看看这个浏览器的布局。首先第一行是按钮和地址栏，第二行就是浏览器控件了。...所以在这里我使用了DockPanel，第一行我指定为Top；第二行不指定，也就是充满整个剩余空间。 然后来看看第一行的布局，这里我希望前三个按钮按顺序排列，最后的地址栏充满整个剩余空间。...不管是哪种图形界面，反正控件总是按钮、文本域、标签那些东西。这里我用到的就是按钮和文本框，当然最重要的是WPF提供的浏览器控件WebBrowser，它封装了浏览器的操作以便我们直接使用。...由于没有单独的处理按下回车的事件，所以这里用的是按下键盘的事件，然后在处理程序中判断按下的是否是回车键，如果是的话再进行下一步处理，也就是让浏览器导航到对应网址。
本指南涵盖路由器的主要功能，通过演示可以实时运行的小应用程序（查看源代码）演示它们。 概观 浏览器是一种熟悉的应用程序导航模型： 在地址栏中输入一个URL，然后浏览器导航到相应的页面。...点击页面上的链接，浏览器导航到新页面。 点击浏览器的后退和前进按钮，浏览器会前后浏览您浏览过的网页的历史记录。 Angular路由器借鉴了这种模式。...当用户点击按钮，从下拉框中选择，或者响应来自任何来源的其他刺激时，您都可以进行命令式导航。并且路由器在浏览器的历史记录中记录活动，所以后退和前进按钮也起作用。...点击“返回”按钮，应用程序返回英雄列表，显示更改的英雄名称。 注意名称更改立即生效。 如果您点击了浏览器的后退按钮而不是“返回”按钮，该应用程序也会将您返回到英雄列表。...与英雄细节不同，当您键入更新时，危机细节更改是暂时的，直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮。
表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题，比如： 点击提交按钮两次。 点击刷新按钮。...使用浏览器后退按钮重复之前的操作，导致重复提交表单。 使用浏览器历史记录重复提交表单。 浏览器重复的HTTP请求。 几种防止表单重复提交的方法 1.禁掉提交按钮。...我之前的文章曾说过用一些jQuery插件效果不错。 2.Post/Redirect/Get模式。在提交后执行页面重定向，这就是所谓的Post-Redirect-Get (PRG)模式。...这能避免用户按F5导致的重复提交，而其也不会出现浏览器表单重复提交的警告，也能消除按浏览器前进和后退按导致的同样问题。 3.在session中存放一个特殊标志。...当表单页面被请求时，生成一个特殊的字符标志串，存在session中，同时放在表单的隐藏域里。接受处理表单数据时，检查标识字串是否存在，并立即从session中删除它，然后正常处理数据。
()的时候就会出栈,也就会返回到我们上一个push进去的URL中 此时我们可以按浏览器左上角的前进后退 replaceState 使用history.replaceState()...main.js 最基本的结构就是这样的 那么现在就要创建路由组件,到时候才可以让路径和路由对应起来 我在scr下的components文件夹下创建两个文件 我写了两个,一个主页(...router-link还有其他的属性 tag: tag可以指定之后渲染成什么组件,比如之前都是渲染成, 但是其实可以渲染成其他类型的组件,比如按钮 App.vue...replace: replace不会留下history记录,所以指定replace的情况下,后退键不能返回到上一个页面中 原来的 App.vue 修改 修改后 active-class:...: 但是这个一般不修改的 通过代码跳转网页 现在我希望直接放按钮,通过点击跳转到对应的页面 本文由“壹伴编辑器”提供技术支持 动态路由 假如我们在进入到用户的页面时想要在路径中显示用户的
大家好，又见面了，我是你们的朋友全栈君。...一、表单重复提交的常见应用场景 网络延迟的情况下用户多次点击submit按钮导致表单重复提交 用户提交表单后，点击【刷新】按钮导致表单重复提交（点击浏览器的刷新按钮，就是把浏览器上次做的事情再做一次，因为这样也会导致表单重复提交...） 用户提交表单后，点击浏览器的【后退】按钮回退到表单页面后进行再次提交 二、防止防止表单重复提交的方式 1、利用JavaScript防止表单重复提交 （1）、用JavaScript控制Form表单只能提交一次...（5）、提交后重定向到一个提交成功的页面 表单提交后跳转到另外一个成功页面。这样可以避免用户按F5导致的重复提交，浏览器也不会出现表单重复提交的警告，以及消除按浏览器前进和后退按导致的同样问题。...与此同时将token放到页面的隐藏input中，发给浏览器。用户在页面上提交时带着这个token一块提交到服务端，服务端通过比对token的值。
之前在项目中遇到一个问题，就是在微信网页上面本来是有返回按钮的，但是大多数人都为了方便，会使用安卓手机自带的物理返回键，这个返回键按下后，就会按照你浏览器的栈存储的路径来一层一层返回，就不执行你页面上的那个返回按钮的操作了...； 当onpopstate被触发时，检查event.state是否等于STATE，如果相等，表示页面发生了后退（按下返回键或者浏览器的后退按钮），则把这次行为当作是返回键被按下了（把点击浏览器的后退按钮也误算进来了...不过这个方法有些缺陷： 如果项目本身使用了pushState，则历史记录会有瑕疵（多了一个历史）； 浏览器的后退按钮点击以及调用history.back()也会被当成按下了返回键。...举个例子： 我在vue的项目中引入xback.js 关于上面在...vue中引入外部js，请参考 http://www.cnblogs.com/zhuchenglin/p/7455203.html 然后在vue中定义一个load_xback 方法 load_xback
UI界面 效果 [布局菜单首页] 首页 [布局菜单展开] 业务数据菜单展开 [布局菜单设置] 设置页面 说明 布局主页分为三个部分， 最上面为导航栏，主要包括刷新按钮，后退按钮，用户信息等内容。...业务数据菜单的二级菜单为表名称，元数据菜单包括序列号、表、关系三个二级菜单，系统菜单包括设置和关于两个二级菜单。 右边为页面主体部分。 布局 嵌套路由 通常由多层嵌套的组件组合而成。...同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如： 设置Setting页面和关于About页面切换的时候，导航和菜单部分都不变，变化的是主体部分，可以通过嵌套路由实现。...$store.state.config.isAllowBack; } } } MainLayout.vue中通过computed计算属性isAllowBack绑定q-btn，这样可以控制后退按钮是否显示...首页不需要后退，设置页面和关于页面就需要后退。后退按钮主要目的是适应不同的浏览器，不依赖浏览器的后退功能，比如H5页面全屏或者嵌入到Cordova壳子里面的时候就非常有用了。
要允许用户在Web历史页面中前进或者后退，要为按钮设置goBack或者goForward的动作。当用户不能在某个方向上再移动时，使用canGoBack或者canGoForward来禁用按钮。...按指定的因子缩放页面内容，并将结果居中在指定的点上。 导航 allowsBackForwardNavigationGestures。布尔值，指示水平滑动手势是否会触发后退列表导航，默认为NO。...网页视图的后退列表，即之前访问过的web页面的列表。 canGoBack。布尔值，指示后退列表中是否有可被导航到的后退项。 canGoForward。布尔值，指示后退列表中是否有可被导航到的前进项。...布尔值，用于确定是否按下连接可以显示链接目标的预览。 - goBack。导航到后退列表中的后腿项中。 - goForward。导航到后退列表中的前进项中。...关于KVO，我在之前的文章iOS开发中的设计模式--观察者模式中详述过。
每当在浏览器的地址栏中输入新的 URL，但我们不想刷新页面时，就会发生这种情况，我们只是想通过加载新内容来刷新视图。 你可以选择将路由存储在 routes[] 数组中。...太糟糕了，因为单击浏览器的“后退”和“前进”按钮与浏览历史记录中的 URL 导航有关。如果没有 History API，就无法谈论路由。...history.back() 与 history.go(-1) 相同，或者当用户在浏览器中单击 Back 按钮时。你可以用任何一种方法达到相同的效果。...当用户按下浏览器的 Forward 按钮时，将执行 history.forward()，它等效于 history.go(1)”。...由于这只是“前端”示例，因此我无法向你展示太多内容。但这就是它在客户端上的工作方式。 初始化服务器端的路由负载 将它们放在一起还需要再执行一个步骤。在我的例子中，只用了 router.html。
需求 如果要你实现一个前端路由，应该如何实现浏览器的前进与后退 ？ 2. 问题 首先浏览器中主要有这几个限制，让前端不能随意的操作浏览器的浏览纪录： •没有提供监听前进后退的事件。...另外，应用的路由路径中可能允许相同的路由出现多次（例如 A -> B -> A），所以给每个路由添加一个 key 值来区分相同路由的不同实例。...3.2.3 实现浏览器的前进、后退 第二个方法就是：用两个栈实现浏览器的前进、后退功能。...当我们点击前进按钮时，我们依次从栈 Y 中取出数据，放入栈 X 中。当栈 X 中没有数据时，那就说明没有页面可以继续后退浏览了。当栈 Y 中没有数据，那就说明没有页面可以点击前进按钮浏览了。...当你通过浏览器的后退按钮，从页面 c 后退到页面 a 之后，我们就依次把 c 和 b 从栈 X 中弹出，并且依次放入到栈 Y。这个时候，两个栈的数据就是这个样子： ?
cookies中UCENTER_IUCTOKEN对应的值 后退 浏览器的后退操作和刷新一样是常用操作，但是有时候我们并不想回退到上一页，比如在当前页面弹窗提示用户是否返回。...刷新后后退 在上步中其实没有完全解决问题，问题在刷新后再后退，这不仅仅是拦截后退操作时存在的问题。...而浏览器回退按钮则有不同，并不是直接执行pop，而是一系列调用，源头在widgets/binding.dart中 mixin WidgetsBinding on BindingBase, ServicesBinding...，关于Navigator2.0可以参见Flutter：Navigator2.0介绍及使用 这里面我提到，Navigator2.0在浏览器回退按钮的处理上又与Navigator1.0不同，点击回退按钮时Navigator2.0...但是这要求我们的每个页面在栈中时唯一的，无法同时出现两个相同的页面，如果应用相对简单其实是可以考虑这种方案的） 总结 所以总结就是，目前flutter web对于浏览器还是没有适配完全，无论Navigator1.0
缺点很明显用户根本无法选择在新页面or本页面打开，只能接受你的实现。用户根本不知道点击按钮后会发生什么。...（如果是标签，用户hover时，会在浏览器左下方看到新页面 URL）4.2 中手方案：+onclick+event 【不推荐】工作2个月后，我懂了点用户体验，但知识局限于：用户点击...有2个问题需要解决：4.3.1 样式问题和样式是有差异的。产品形态上希望用按钮，我们就不能用超链接样式。...某些逻辑，只希望本页面跳转时执行，不允许新页面打开时执行（因为JS只能执行本页面的JS，如果在新页面打开，本页面应该保持不变，不能执行那段JS，例如React Router中的）。...：0：主按键，通常指鼠标左键或默认值1：辅助按键，通常指鼠标滚轮中键2：次按键，通常指鼠标右键3：第四个按钮，通常指浏览器后退按钮4：第五个按钮，通常指浏览器的前进按钮这里我们只管理左键就好，其它按键都保持浏览器默认行为
返回按钮将用户待回至之前的位置 有时候，无限滚动的实现带来一个主要的可用性缺陷：滚动位置并未被记录为“状态”。如果用户从列表中的链接跳转了，然后点返回按钮，他们希望能回到页面原来相同的位置。...但是列表的位置不再存在了，这意味着使用浏览器的返回按钮一般都导致滚动位置重置到页面顶部。无怪乎用户很快就觉得沮丧，都没有一个合适的“回到列表”的功能。 ?...别让你的用户就因为使用返回按钮，找不到列表的位置。很重要的是，用户通过列表访问了某一个项目的详情页，他们点击浏览器返回按钮返回列表的时候，也应该在相同的位置。...Flickr 监听用户点击浏览器后退按钮的行为，满足用户的期望。APP 记住用户的滚动位置，所以当用户按后退按钮的时候，返回到原始位置。 ? 4....当网站或应用提供书签功能的时候，用户会使用的。比方说，Pinterest，使用书签工具帮助用户保存创意。 ? 5. 加载新内容时提供视觉反馈 当内容在加载的时候，用户需要明确的指示，说明正在进行中。
#后跟的就是页面Hash，同样hash的改变也会推进浏览器历史记录中。 支持后退前进。...增加历史盏中的一条。 history.replaceState(state,title[, url]) 替换路由。在历史记录中替换当前记录。...前提是不能真的发生了页面跳转,而是在由history.pushState()或者history.replaceState()形成的历史节点中前进后退 注意:用history.pushState()...window.onpopstate history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate...更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。
本文告诉大家如何在 UWP 标题栏添加后退按钮 设置里，标题栏有后退按钮，请看下图 ?...在win平板，可以有后退键，手机也有，但是手机的是物理的，平板的和 PC 的后退是在标题栏做的 如果需要在标题栏显示后退按钮，需要使用下面代码 Windows.UI.Core.SystemNavigationManager.GetForCurrentView...在用户点击标题栏的后退按钮的时候，可以通过下面代码拿到事件 Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested...可以通过 BackRequested 的参数 handle 阻止在手机按下后退键让应用隐藏。...BackRequested 后退方法，如何获得参见：c# 设计模式 责任链.md 注意不要在每个页面的构造都使用添加事件，如果这样子，那么就会出现按一下后退出现你想不到的异常。
，转弯的时候，小车两边的轮子按反方向转。...为了达到更好的操作效果（一直按下前进，小车前进，按下左右转小车左右转，松开左右转，小车继续前进。松开前进，小车停止。后退同理），在单片机程序里加入了前进或后退的标志位。...，这样子发数据也是为了获得更好的操作体验 前进 后退 左转 右转按钮是使用的setOnTouchListener方法，以便在按钮按下或松开时发送数据， 就看一下前进代码 我在前面声明了一下 //前进，关于....h文件全放在了一个.h文件中，这样在每个c文件的开头只需加上#include "include.h"就方便多了 #define _MAIN_C_ #include "include.h" sbit...5v供电，不过没有烧，正常工作，就是摸上去有点热。
用了AJAX之后，你点击，然后页面上的一行字就变化了，页面本身不用刷。 Ajax只是一种技术，不是某种具体的东西。不同的浏览器有自己实现AJAX的组件。...我们传统的web应用，当我们提交一个表单请求给服务器，服务器接收到请求之后，返回一个新的页面给浏览器，这种做法浪费了很多带宽，因为我们发送请求之前和获得的新页面两者中很多的html代码是相同的，由于每次用户的交互都需要向服务器发送请求...是支持异步请求的技术，可以发送请求给服务器，并且不阻塞用户在IE浏览器中首次引用，使我们的网络应用更加强大。...Ajax缺点: 1.破坏了前进后退功能，用户往往通过后退按钮来取消上一步操作，但是使用ajax无法实现。...可以使用Gmail来解决这个问题，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。 2.安全问题。
栈是一种后进先出的结构，可以把它想象成一摞盘子，用户每点开一个新网页，都会在上面加一个新盘子，叫「入栈」。用户每次点击「后退」按钮都会取走最上面的那个盘子，叫做「出栈」。...它可以接收三个参数，按顺序分别为： 一个对象或者字符串，用于描述新记录的一些特性。这个参数会被一并添加到历史记录中，以供以后使用。这个参数是开发者根据自己的需要自由给出的。...「前进」、「后退」按钮时，就会触发popstate事件。...为了处理用户前进、后退，我们监听popstate事件。当用户点击前进或后退按钮时，浏览器地址自动被转换成相应的地址，同时popstate事件发生。...在事件处理函数中，我们根据当前的地址抓取相应的内容，然后利用 AJAX 拉取这个地址的真正内容，呈现，即可。
但每次hash值的改变，都会在浏览器的访问历史栈里增加一个记录，使用'后退'键便能返回上一个位置。在H5的history模式出现之前，hash是前端路由的实现方式。...(); // 前进一页history.back(); // 后退一页 在H5规范中引入了三个新的API， // 按指定的名称和URL（如果提供该参数）将数据...然而调用history.pushState()/history.replaceState()不会触发popstate事件，只有在做出浏览器动作时，才会触发该事件，比如用户点击浏览器的回退/前进按钮，或者在...点击浏览器的前进或后退按钮； 2. 点击 a 标签； 3. 在JS代码中触发history.pushState函数； 4....memeory模式的路由信息保存在内存中，浏览器的前进后退操作无效，更适合运用在单机应用中。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
