popstate监控浏览器前进后退,后退时state为null 前进时state却有值 5C
 <body>
        <div id="target">
            <a href="/#/ccc">dianji</a>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        $("a").click(function(evt) {

            evt.preventDefault(); // 阻止默认的跳转操作
            var uri = $(this).attr('href');
            var newTitle = ajax_Load(uri); // 你自定义的Ajax加载函数,例如它会返回newTitle
            document.title = newTitle; // 分配新的页面标题
            var bbb = document.getElementById("target").innerHTML;
            if(history.pushState) {
                var state = ({
                    url: uri,
                    title: newTitle,
                    bbb: bbb
                });
                document.getElementById("target").innerHTML = "bbb";
                window.history.pushState(state, newTitle, uri);
            } else {
                window.location.href = "#!" + ~fakeURI;
            } // 如果不支持,使用旧的解决方案
            return false;
        });

        function ajax_Load(uri) {
            return "aaa";
        } // 你自定义的ajax函数,例如它会返回newTitle
        window.addEventListener('popstate', function(evt) {
            var state = evt.state;
            console.log(state);
            var newTitle = ajax_Load(state.title); //你自定义的ajax加载函数,例如它会返回newTitle
            document.getElementById("target").innerText= state.bbb;
            document.title = newTitle;

        }, false);
    </script>
0

1个回答

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
history pushState 实现浏览器前进与后退
使用HTML5的pushState实现的页面前进与后退功能。
vue vue-router 完美实现前进刷新,后退不刷新。附scrollBehavior源码解析
需求:在一个vue的项目中,我们需要从一个列表页面点击列表中的某一个详情页面,从详情页面返回不刷新列表,而从列表的上一个页面重新进入列表页面则需要刷新列表。   而浏览器的机制则是每一次的页面打开都会重新执行所有的程序,所以这个功能并不能直接实现。而vue-router给我们提供了一个叫scrollBehavior的回调函数,我门可以用这个方法结合keep-alive能很好的实现这个功能,下面第...
popstate 事件, 浏览器返回事件
popstate :浏览器返回事件当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。需要注意的是调用history.pushState()或history.replaceStat...
浏览器“后退”、“前进”或可以这么去监听
最近,工作业务有点变化,碰巧遇到一个老生常谈的问题——如何去监听浏览器的“后退”事件。其实,情况是这样的,产品同学希望用户离开页面之前,能展现一个漂亮的弹出层给用户,可以通过这个浮层了解用户离开的原因、或者让用户给应用评分等。我们知道,浏览器实现了onbeforeunload和onunload事件,onbeforeonload事件是在浏览器即将请求下一个页面(请求还未发出)的时候触发,它可以实现阻...
监听后退事件和hash变化
var detectBack = { initialize: function() { //监听hashchange事件 window.addEventListener('hashchange', function() { //为当前导航页附加一个tag this.history.replaceState('hasHash', '', ''); }, false); wind
算法系列- 栈:如何实现浏览器的前进和后退功能?
整理自极客时间-数据结构与算法之美。原文内容更完整具体,且有音频。购买地址: 1.如何理解栈 关于“栈”,有一个非常贴切的例子,就是一摞叠在一起的盘子。我们平时放盘子的时候,都是从下往上一个一个放;取的时候,我们也是从上往下一个一个地依次取,不能从中间任意抽出。后进先出,先进后出,这就是典型的“栈”结构。 从栈的操作特性上来看,栈是一种“操作受限”的线性表,只允许在一端插入和删除数据。 ...
点击浏览器前进后退按钮时禁止页面跳转
window.history.go(1);   a页面跳转到b页面后,控制b页面不能返回a页面,将这段js代码放入a页面的javascript中  window.history.go(-1);表示不能向前跳转
使用pjax处理ajax的前进后退历史
什么是pjax? 现在很多网站( facebook,  twitter)都支持这样的一种浏览方式, 当你点击一个站内的链接的时候, 不是做页面跳转, 而是只是站内页面刷新。 这样的用户体验, 比起整个页面都闪一下来说, 好很多。 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退...
如何在点击浏览器前进、后退键时刷新页面而不读取缓存
本文说明:是汇总了网上说的有用的方法 一、 有时在处理服务器页面如表单时,浏览器前进、后退键会带来麻烦,无法使页面获取最新的数据,从而会导致意外产生,这时解决办法有两种,一是可以利用js禁用前进、后退键;二是当点击前进、后退键后自动刷新页面,那么就需要禁掉页面缓存,因为浏览器首先会读取缓存,如果没有才再请求服务器; 方法二禁用缓存如下: 客户端代码: asp服务
禁止浏览器后退
最近搞Android项目的时候,遇到一个比较蛋疼的需求,需要从Client App调用系统浏览器打开一个页面,进行杂七杂八的一些交互之后,返回到App。如何打开浏览器和如何返回App这里就不说了,有兴趣的童鞋可私下交流。 之所以说这个需求蛋疼,是因为Android有个物理返回键啊……返回键啊……键啊……啊…… 用户按下返回键后,预期应该跟点击页面上的返回键一样——返回App。然而这个返
禁用浏览器前进后退,不允许页面中的元素选中和拖拽;
// 禁止浏览器的前进后退        history.pushState(null, null, document.URL);        window.addEventListener('popstate', function () {            history.pushState(null, null, document.URL);        });        //...
什么因素决定浏览器前进后退时的页面一定会被刷新?
排除ajax在外,常规的页面在前进后退后,有些页面是无缓存必须被刷新的,而有些则还停留在必须手动刷新的阶段。 这跟返回里面的 Response Headers 中的 Cache-Control 有关 比如用chrome浏览器第一次请求http://baidu.com,请求会直接发至baidu服务器,返回头信息内有 Cache-Control: max-age=0 如果你再看看b
vue单页应用前进刷新后退使用缓存的实现
目录 前言 问题场景 一、页面A-&amp;gt;页面B-&amp;gt;页面C 二、页面A-&amp;gt;页面B-&amp;gt;页面C-&amp;gt;页面B 解决方案 (1) keep-alive时限前进刷新后退使用缓存 (2)结合vuex实现前进刷新后退使用缓存 注: 前言 vue-cli创建的创建结合keep-alive可以实现页面缓存的效果。但是,在实际的使用过程中,发现后退返回使用缓存,前进进入也是使...
点击浏览器前进、后退键时刷新页面而不读取缓存
如何在点击浏览器前进、后退键时刷新页面而不读取缓存 点击浏览器的后退键,总是会读取缓存,这样会导致有时候获取不到页面上的值,如果点击后退键时刷新页面而不读取缓存,这样就不会产生获取不到值的问题。 1、在jsp页面或者写在controller里面 2、JavaScript解决方案(我没有试) $(document).ready(function(){ $(&quot;#test...
浏览器前进、后退键时刷新页面而不读取缓存,重新刷新页面
点击浏览器的后退键,总是会读取缓存,这样会导致有时候获取不到页面上的值,如果点击后退键时刷新页面而不读取缓存,这样就不会产生获取不到值的问题。 jsp页面和servlet页面均可以设置。 response.setHeader("Cache-Control","no-cache"); response.setHeader("Pragma","no-cache"); response.setD
angular 监听浏览器后退
// 避免新进页面时触发监听 vm.pageState = false; setTimeout(function(){ vm.pageState = true; },1000); // 监听浏览器后退事件 $scope.$on(&quot;$locationChangeStart&quot;, function(ev){ if(vm.pageState){ ...
让浏览器记住ajax请求并能前进和后退方法(一)
在我们浏览不同网页的时候,我们可以通过浏览器的前进、后退键来去到我们前后访问过的页面。这都有一个共同点,就是 浏览器地址栏的地址改变了。浏览器自身维护了一个记录用户访问页面历史的栈,栈中记录了用户访问不同页面的先后顺序。 但是在开发中,我们经常会用到ajax技术去提升网页的用户体验。但是ajax本身并不改变浏览器地址栏中的url,是在同一个 网页内部操作的,这时,浏览器并不会记录ajax请求的
网上面试题
链接:https://www.zhihu.com/question/41466747/answer/91084888 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面
禁止浏览器的前进后退按钮功能的方法
禁止使用IE8前进后退按钮实现方法: 在JSP页面中把设置成这样这个网页就会永远停留在这个页面,不能前进后退了。  注:这个方法在IE6,IE8可用,但不适用firefox,chrome
html前进后退以及刷新
&amp;lt;a href=&quot;javascript:history.go(-1);&quot;&amp;gt;返回上一步&amp;lt;/a&amp;gt; &amp;lt;a href=&quot;javascript:history.go(-n);&quot;&amp;gt;返回上n步&amp;lt;/a&amp;gt; &amp;lt;a href=&quot;javascript:history.go(0);&quot;&amp;gt;刷新&amp;lt;/a&amp;gt; &a
浏览器前进后退时不缓存请求服务器
有时我们需要浏览器前进后退时不适用缓存而是请求服务器。这里做一下记录。在需要的jsp页面插入一下代码,即可实现。实测 IE8(包括)以上可用,IE8一下未测试。<% response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); response.setHeader("Pragma", "no-cache
vue + vue-router 前进后退推拉动画效果
&amp;lt;template&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;transition :name=&quot;slideDirection&quot;&amp;gt; &amp;lt;router-view class=&quot;router-view&quot;/&amp;gt; &amp;lt;/transition&amp;gt; &amp;lt;/div&amp;
vue前进刷新后退不刷新
问题描述:一个页面只有第一次进入会获取数据,之后就不会获取数据(不会发起网络请求) 我们发现只有第一次进入页面时才会请求数据,这就有一个问题,如果是详情页面,这样详情的内容就不会刷新,点击不同的商品详情都是同一个,每次需要手动刷新才能,这真的体验很不好 主要原因设置了keep-alive缓存 &amp;lt;keep-alive&amp;gt;          &amp;lt;router-view&amp;gt;&amp;...
禁用浏览器后退按钮 针对IE的诡异方案版
         google “禁用浏览器后退按钮”会搜到很多文章。提一个比较有意思的解决方案,下面的解决方案仅针对于IE浏览器,因为各个浏览器对后退按钮 以及历史记录的处理是不同的。          先说明问题背景: 当在IE有iframe的时候,而这个iframe的历史记录会被记录在浏览器中,当点击后退按钮的时候,会发现主窗口不进行后退,而是iframe里面进行后退,这样就可能引发之前...
google浏览器到前进键和后退键分别是什么
前进键shift+backspace,Alt+Right 后退键backspace,Alt+Left 主页Alt+Home 刷新F5,ALT+F5 https://zhidao.baidu.com/question/402789446.html
很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信、支付宝、百度糯米、百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢。 我相信很多朋友像我一样,在百度、搜狗里面搜索很久都没找到方法。下面就来告诉大家怎样监听的方法: 首先我们要了解浏览器的h
vue实现前进刷新后退不刷新效果
最近在用vue尝试着做移动端的项目。希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来(返回不用重新加载),关闭的界面能被销毁掉(再进入时重新加载)。例如对a-&amp;gt;b-&amp;gt;c 前进(b,c)刷新,c-&amp;gt;b-&amp;gt;a 后退(b,a)不刷新。 由于 keep-alive 会把所有加载的过的界面都缓存起来,没法实现返回时将界面销毁掉,导致再进入时没有重新加载这个界面。于是首先...
(转)基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题。...
需要使用的 jquery.history.js插件在巨人的肩膀之上,以下前进后退工作基于插件完成!做了几个兼职,上天帮人完成页面的时候顺便做了一个ajax的请求。发现浏览器的刷新,后退,前进按钮失效。于是乎google了一下。发现了一些解决方法。其中一个jquery.hashchange.js的插件有的时候会失效,有的时候会造成页面多次请求。换另外一个插件测试下,完美达到我的要求。总的思路,在ur...
JavaScript实现页面的后退前进按钮
js实现页面后退前进按钮
js监听浏览器后退事件
最近需求需要,需在浏览器(web 和 h5手机端)实现回退弹框 网上很少找到这个需求,找到的也是有bug的,最后解决了,分享一下问题和解决方案 用到的函数:window.history.pushState 网上有个方法测试了一下:$(document).ready(function(e) { var counter = 0; if (wind
ajax技术如何解决浏览器前进后退按键失效的问题
Q:ajax技术,很强大,但ajax应用中容易导致浏览器的前进后退按钮失效,不产生前进后退功能,这是个很头疼的问题,它严重的破坏了用户美好的体验,如何解决Ajax过程中导致的浏览器前进后退按键失效的问题? 先看看其定义与介绍 1.什么是AJAX? AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页
js监控游览器关闭、刷新、回退、前进事件
test             "javaScript">                                  var flag = true;                 window.onbeforeunload = function () {                     if (flag) {             
解决浏览器后退前进重复提交的问题
  问题: jsp中点击按钮触发一个函数,函数请求一个链接A,函数完成后将该按钮置灰.完成以上步骤后在ie下点击后退会再一次的请求 A. 页面代码: &amp;lt;input type=&quot;button&quot; id=&quot;btnsend&quot; onclick=&quot;javascript:if(seadSms(${user.userID}))this.disabled=true;&quot; value=&quot;发短信&quot;/&amp;gt...
调用浏览器中的前进和后退
window.history对象在编写时可不使用 window 这个前缀。为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。 方法: history.back() - 加载历史列表中的前一个URL,这与在浏览器中点击前进按钮是相同的history.forward() - 加载历史列表中的下一个URL,这与在浏览器中点击前进按钮是相同的 实例: 代码如下:<html><butt
着手于history新特性,解决tab切换无法前进后退问题。
这个问题应该是 ajax + tab 的通病,最近的电商项目,订单部分用的 ajax +tab,由于ajax + tab切换没有产生history,所以造成无法返回。此贴,也是楼主研究别的博主的技术贴,自己消化过后才放出的帖子,只适用于日常开发,解决日常开发问题。由于楼主工作中没有前端partner,所遇到的问题只能自己琢磨也没有人交流。所以不足之处还请多谅解!订单各种状态的数据都是靠ajax不同...
网页中经常见到的前进后退功能实现
浏览网页时,都会熟悉的前进和后退网页,下面是网页中前进和后退功能的实现: 前进一步 第一步:在第一个页面中做跳转到第二个页面的链接,并在js中实现前进一步的函数; 页面1 function to2(){ window.history.forward(); } 页面1 前进一步 第二步:做第二个页面 页面2 页
popstate 监听app、浏览器的返回
在实际开发中,遇到需要在当前web页面监听app、浏览器返回的情况,进过一顿搜索后,终于找到一种比较靠谱的方式! 下面话不多说,直接上代码: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;initial-
使用栈结构简易实现浏览器的后退与前进功能(以Android为例)
使用栈结构简易实现浏览器的前进与后退操作(不使用官方函数),以Android为例
iframe框架前进后退
在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则必须指定contentWindow属性。
让浏览器支持 jquery ajax load 前进、后退 功能
一般在做 ajax load 的时候,很多人都不会考虑到需要浏览器支持前进后退功能,因为大部分人都不知道可以实现。
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 学习java基础语法时 学习java时