HTML5中关于History模式的详解

一、history.pushState

history.pushState(state, title, url);

上面第一和第二个参数可以为空，主要就是第三个参数，表示新历史纪录的地址，浏览器在调用pushState()方法后不会去加载这个URL，新的URL不一定要是绝对地址，如果它是相对的，它一定是相对于当前的URL

二、history.replaceState

history.replaceState(state, title, url);

window.history.replaceState 和 window.history.pushState 类似，不同之处在于 replaceState 不会在 window.history 里新增历史记录点，其效果类似于 window.location.replace(url) ，都是不会在历史记录点里新增一个记录点的。

三、window.onpopstate

来监听url的变化

window.addEventListener( popstate , function() { var currentState = history.state; * 触发事件后要执行的程序window.onpopstate = function(){}

javascript脚本执行 window.history.pushState 和 window.history.replaceState 不会触发 onpopstate 事件，在浏览器点击前进或者后退会触发

谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的，谷歌浏览器奇怪的是回触发 onpopstate 事件，而火狐浏览器则不会

四、下面贴一个类似vue-router的HTML5模式的例子，纯属加深理解，写的很粗糙。

 !DOCTYPE html  html lang= en  head  meta charset= UTF-8  title HTML5 History 模式(第二版) /title  link rel= stylesheet type= text/css href= css/style.css  style type= text/css  .container-bg{width:1000px; overflow: hidden; margin-right: 0 auto;} .pagination{width: 1000px; background-color: #d8d8d8; height: 30px; line-height: 30px;} .pagination li{width: 100px; height: 30px; background: red; float: left; cursor: pointer; color:#fff; margin: 0 10px 0 0;} /style  /head  body  p >
 
顺便贴一个node.js中的server代码，为了测试，很随意简单的写了一个

var fs = require( fs )var path = require( path )var express = require( express )var app = express();app.use(express.static( ./public var router = express.Router();router.get( /page ,function(req,res){ var page = req.query.page try{ var text = fs.readFileSync( ./data +page+ .json  res.json(text.toString()) }catch(err){ res.send( 哈哈！傻逼，没有拉！ ) app.use(router)app.listen(3000)
 
 注意：history.pushState({pageIndex : 1}, , http://127.0.0.1:3000/lmw/ +query)这里第三个参数写了完整的绝对路径，如果写成 /lmw/ +query这样的相对路径，会随着query值得增加无限在url后面追加，因为相对路径它一定是相对于当前的URL
以上就是HTML5中关于History模式的详解的详细内容，其它编程语言        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。