首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

使用Ajax可以异步获取数据,可以更高效地渲染页面。...但也存在这一些问题: 再刷新页面页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好  1、 早前会使用浏览器的 hash锚点 来解决 不同的hash标记着页面不同的部分...,能修正页面刷新数据不正确的问题 再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度 Chrome FireFox IE Opera Safari 5.0..." value="Ajax获取"> value: 0 JS var $val = $('#ajax-test-val...,或者直接将该标记页对应的结果直接存起来 随着后退操作,地址栏url得到了更新,异步的数据也得到了更新 刷新页面或新打开页面,就要根据url中的标记去请求数据了 要记住的是,浏览器并不会自动加载url这部分标记对应的这个异步内容页

2.4K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ajaxjs 事件的执行顺序

    有一个需求,滚轮滚动到相应位置的时候执行当前的动画,这个动画在footer里面,而网页的主体通过ajax进行渲染,我在js里面调用ajax渲染数据,然后再获取主体的高度,滚动到该高度的时候执行动画。...我大致想了两种解决办法,均以失败告终,本地是ajax执行,服务器是js执行。...最后我想到了,ajax不就是一种异步方法,我将其改为同步不就行,先让ajax执行完在执行js事件。...async: false, 我在ajax里面写了async这个方法,false 意思是将其默认为同步获取数据,很好,回到服务器打开控制台,发现是先渲染了数据,才获取了主体的高度,问题得以解决。...当然这样做有弊端的,如果接口出问题,ajax渲染失败,那么整个网页的js都将执行不了。不过我想真到了数据都渲染不出的地方,访问网页就没有意义了,所以最后我采用了这种方法。

    2.9K30

    浏览器后退刷新页面的解决办法

    在开发微信的H5页面的时候,发现ISO的微信内置浏览器后退刷新了,然而业务实现需要刷新。...IOS上的微信内置浏览器为了优化用户体验,采用了后退刷新的策略,也就是A页面打开B页面,B页面后退到A页面的时候,A页面刷新(连JS都不执行)。...可以理解成A页面打开B页面的时候,A页面被隐藏了,后退的时候只是把A页面显示出来了。 这种情况禁缓存是没有效果的,可以通过监听onpageshow来刷新页面。...代码如下,在A页面JS中添加 //解决IOS微信webview后退执行JS的问题 window.onpageshow = function(event) { if (event.persisted...) { window.location.reload(); } }; event.persisted为了查看页面是直接从服务器上载入还是从缓存中读取的。

    3.8K30

    ajax无刷新页面切换,历史记录后退前进解决方案

    问题描述 我们在工作中常常遇到需要用ajax来显示下一页和上一页,ajax可以刷新页面进行操作!但是,假如你想通过浏览器的历史记录返回上一页和下一页。那么ajax默认是做不到的!...一般需求要历史返回的时候,我们通常不使用ajax。但是呢,假如一个页面中,只有一个地方是需要动态的上一页下一页,其他地方都是固定的,那么这种情况除了使用模板之外,我们使用ajax来操作显得格外方便!...那么如何解决ajax历史记录的返回和前进呢?今天我们就一起来学习一下! js中history相关API普及 首先我们来看看history相关的API。...window.onpopstate history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate...而当有浏览者点击浏览器“后退”或“前进”按钮时,我们用下面的代码来响应用户的操作: window.onpopstate = function(event){ if(event.state){

    1.4K30

    前台模板underscore.js配合Ajax渲染页面数据

    underscore.js文件cdn地址:https://cdn.bootcss.com/underscore.js/1.9.0/underscore.js 本次配合Ajax渲染页面数据,让前台页面的数据根据效果...需要得到模板内容以及模板组装 //得到模板 var tpl=$('#tpl').html(); //组装模板 var compiled = _.template(tpl);//tpl为刚才得到的封装模板 Ajax...无法跨域,所以请求的地址使用相对路径,循环得到的ajax中data数据,进行模板填充!...之前的使用ejs模板填充,后台需要前台页面修改为ejs,用户访问页面审查元素中所有模板全部被后台解析相应内容,而前台模板的审查元素还是对应的,浏览时候请求ajax后填充模板!...这样变得前后台更加清晰,前台只需负责页面,后台管理数据(提供数据接口),连接二者桥梁(Ajax),数据请求则完成简单的前后台交互,更加明显!互不干扰!

    2K20

    jquery ajax请求成功,数据返回成功,seccess执行的问题

    这时开始怀疑,难道是JS程序有处理数据兼容性有问题,觉得甚是不可思议。整了大约半小时,越来越觉得不大可能。就放弃了这种想法。 有转向,重新审视数据。 但是发现数据从中间换行了,没太在意。...即如果你定义的 dataType 是 json 类型的,那么返回来的数据一定是 json 才可以,平且不然就会执行 error 里的程序块儿。...对于在页面填写入库的数据最好强制性的做,去空操作。 b. 特殊的业务需注意特殊字符。...原因是ajax请求跨域了,解决方法是在两个文件里都添加一段 js: [/b]document.domain,或者采用Jsonp的方式,如我的前一篇blog中提到的。...请求的域和当前域是否是同一域,如果不是同一域也十分有可能进入error:function(){***} 原帖:http://www.myexception.cn/ajax/413061.html

    3.9K30

    HTML5 简介(三):利用 History API 无刷新更改地址栏

    简单来说:假设当前页面为renfei.org/,那么执行下面的 JavaScript 语句: window.history.pushState(null, null, "/profile/"); 之后,...应用:全站 AJAX,并使浏览器能够抓取 AJAX 页面 这个可以干啥用?一个比较常用的场景就是,配合 AJAX。...假设一个页面左侧是若干导航链接,右侧是内容,同时导航时只有右侧的内容需要更新,那么刷新整个页面无疑是浪费的。这时我们可以使用 AJAX 来拉取右面的数据。...但是如果仅仅这样,地址栏是不会改变的,用户无法前进、后退,也无法收藏当前页面或者把当前页面分享给他人;搜索引擎抓取也有困难。这时,就可以使用 HTML5 的 History API 来解决这个问题。...另外,History.js 库也提供了对老版本浏览器的 history API 支持(同样是利用替换 hash)。为了搜索引擎收录,可能需要使用#!表示法。

    2.3K10

    AJAX常见面试问题

    AJAX最大优点就是能在刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息,减少用户等待时间,带来非常好的用户体验。...一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在Ajax应用程序中,这将无法实现。...后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题,因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法?...平时常用的引入JS方式,是同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,也就是说,浏览器在下载或执行js代码块时,后面的标签不会被解析。...异步加载(async)JS文件,允许页面内容异步加载,仅适用于外部脚本。 延迟加载(defer)属性规定是否对脚本执行进行延迟,直到页面加载为止。 25.如果对一个js对象进行深度拷贝?

    1.8K20

    pjax 历史管理 jQuery.History.js

    更新 http://www.bootcdn.cn/jquery.pjax/ 简介 pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接、网页标题、以及浏览器的后退前进按钮操作...pjax通过抓取HTML从您的服务器通过Ajax和更换容器页面上的HTML内容会与Ajax。...然后更新无需重新加载你的网页的布局或任何资源使用pushstate浏览器的当前URL(JS,CSS),提供了一个快速的外观,全页面加载。但它确实就是Ajax和pushstate。...请求中,不能更新地址栏,地址栏上的“前进”和“后退”按钮就失效了,带来了另外一种糟糕的用户体验。...这个插件它会去判断浏览器是否支持onhashchange事件,如果不支持,就定时(每个100毫秒)循环判断hash有没有变化,从而执行相应处理。

    2.4K50

    layer执行父窗口ajax方法,layer 弹出层 回调函数调用 弹出层页面 函数

    1、项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下。...2、自己定义的公共页面方法: layuiWindow: function (options) { var defaults = { title: ‘添加菜单’, width: ‘100px’,...} }); 4、子页面方法: //保存数据 function submitForm() { var parentId = $(“#parentId”).val(); var childrenNode...= $(“#txtChildren”).val(); var path = $(“#txtPath”).val(); $.ajax({ url: “/SysMenu/Insert”, data:...layer弹出层时只显示遮罩层,不显示弹出框问题 最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert

    2.2K30

    Ajax与jQuery异步加载数据

    的div将展示Ajax数据 (document).ready(function(){})指页面其他元素加载完成后开始加载Ajax数据,此时,浏览器不会有加载条和转圈的情况出现。.../$', 'tools.views.ajax_server', name='ajax_server'), 缺陷 对应用Ajax最主要的批评就是,它可能破坏浏览器的后退与加入收藏书签功能。...一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙;用户通常都希望单击后退按钮,就能够取消他们的前一次操作,但是在Ajax应用程序中,却无法这样做。...不过开发者已想出了种种办法来解决这个问题,HTML5之前的方法大多是在用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。...(例如,当用户在Google Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态)。

    10.9K20
    领券