html5 使用window.history进行页面刷新

//主要行为和方法如下:

使用方式

if (!!(window.history && history.pushState))
 {   
   // 支持History API
    var stateObj = { foo: "bar" }; 
    history.pushState(stateObj, "page 2", "user.html"); 
    //第一个参数是 附加数据,第二个参数是title,第三个是url尾部
    //当前页面如果是 http://www.opq.me触发后将是http://www.opq.me/user.html(实际上user.html不存在,但这里并不会出现NotFound404 )
    //这种行为是入栈
    
    /**++++++++++++++++++++++++++++++++++++++++++++++++++++++***/
    //为了响应出栈,我们需要监听 出栈事件
    window.addEventListener(window,‘popstate‘,function onPopStack(evt){
         var e = evt || window.event;
         console.log("location: " + document.location);   
         console.log("state: " + JSON.stringify(event.state));
         console.dir(evt);  
    },true);
  
 } 
else {  
 // 不支持 
}

如何出栈,出站后如何前进?

这是一个不是问题的问题:

①答案是: History.back()          history.go(index)      history.forward(),当然这是对于使用程序控制的

②还有一个答案是浏览器的回退和前进按钮

意义浅析,这种网站的意义不言而喻,我们只需要一个页面就可以完成很多任务,但后台控制器只有一个,少了很多请求,也提高和用户体验

目前前端MVC框架backbone.js使用了 锚链接的方式,没有使用history api,主要是为了兼容 IE浏览器,期待未来history api本融入其中。

时间: 2024-08-24 16:27:34

html5 使用window.history进行页面刷新的相关文章

使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="周记[学校晚会篇]" /><meta name="description

由window.history.back()引发的问题

编写人:CC阿爸 2015-1-30 今天在这里,我想与大家一起分享由windows.history.back()引发的问题,笔者在实际开发当中遇到了多种不同的情况,在此做个小结,以供参考.有兴趣的同学,可以一同探讨与学习一下,否则就略过吧. 1.由于刚开始进行的web开发,很多时候使用的为html控件,因此处理起来相当简单 如以下两种方法: window.history.back();  (不会刷新) window.location.href=’上一个页面.aspx’  (会刷新) <inpu

JavaScript页面刷新与弹出窗口问题的解决方法

1. [代码][JavaScript]代码     ?一.无提示刷新网页 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点“确定”才会刷新.而有的页面不会提示,不弹出提示窗口,直接就刷新了. 如果页面没有form,则不会弹出提示窗口. 如果页面有form表单,  a)< form method="post" ...> 会弹出提示窗口  b)< form method="get" ...> 不会弹出 二.javascript刷新页面

window.history.pushState与ajax实现无刷新更新页面url

ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history,点击前进后退按钮会触发popstate事件. 这些方法可以协同window.onpopstate事件一起工作. 改变url的demo 本页是foo.html,url改变成bar.html,内容却不变 <!DOCTYPE html> <html> <head> <me

解决window.history.go(-1)执行后不刷新页面的问题

在iphone上出现了window.history.go(-1)执行后不刷新页面的问题,安卓不会有这个问题. 解决方法为在返回后的页面加上: window.addEventListener('pageshow', function(e) { //如果检测到页面是从“往返缓存”中读取的,刷新页面 if (e.persisted) { window.location.reload(); } }); 原文地址:https://www.cnblogs.com/luoyihao/p/12665868.ht

使用ajax和history.pushState无刷新改变页面URL

表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器前进和后退. 是什么有这么强大的功能呢? HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的问题: 1.可以无刷新

HTML5: History API 无刷新更改地址栏

HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转. 简单来说:假设当前页面为renfei.org/,那么执行下面的 JavaScript 语句: window.history.pushState(null, null, "/profile/"); 之后,地址栏的地址就会变成renfei.org/profile/,但同时浏览器不会刷新页面,甚至不会检测目标页面是否存在. 应用:全站 AJAX,并使浏览器能够抓取 AJAX 页面 这个可以

HTML5之pushstate、popstate操作history,无刷新改变当前url

pushState方法 一.认识window.history window.history 表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过 history 对象提供对览器历史记录的访问能力.它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退. 1.历史记录的前进和后退 在历史记录中后退,可以这么做: 1 window.history.back(); 这就像用户点击浏览器的后退按钮一样. 类似的,你可以前进,就像

HTML5中window.postMessage,在两个页面之间的数据传递

HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功能,但是支持IE8+,假如你的网站不需要支持IE6和IE7,那么可以使用window.postMessage.关于window.postMessage,很多朋友说他可以支持跨域,不错,window.postMessage是客户端和客户端直接的数据传递,既可以跨域传递,也可以同域传递. 应用场景 我只