HTML5 History API 完成无更新自动跳转

日期:2020-10-11 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

有1次在上**网的情况下,发现登录、申请注册动漫实际效果十分绮丽,但让我觉得吃惊的是网页页面竟可以完成无更新自动跳转(已改版,收看此实际效果能够猛击此处:GitHub或阅FM),回望了所学的前端开发专业知识,好像沒有任何技术性能够完成这1点,因而百度搜索了1下,才发现这原先是应用HTML5中History API完成的实际效果,但怎奈1直未曾派上用处。直至blog改版时,才将这1技术性运用起来。
在HTML5中,
1. 新增了根据JS在访问器历史时间纪录中加上新项目的作用。
2. 在不更新网页页面的前提条件下显示信息更改访问器详细地址栏中的URL。
3. 加上了当客户点击访问器的后退按钮时开启的恶性事件。
根据以上3点,能够完成在不更新网页页面的前提条件下动态性更改访问器详细地址栏中的URL,动态性显示信息网页页面內容。
例如: 当网页页面A和网页页面B內容不1样的情况下,在HTML5以前,假如从网页页面A切换到网页页面B时,必须在访问器下从网页页面A切换到网页页面B,或说,假如必须有后退按钮功 能的话,能够在URL详细地址加#XXXX 能够完成后退作用。那末如今在HTML5中,能够根据History API完成以下解决便可:
1. 在A网页页面 根据发AJAX恳求 恳求网页页面中的B数据信息。
2. 在网页页面A中根据JS装载相应的信息内容到相应的部位来。
3. 根据History API在不更新网页页面的状况下在访问器的详细地址栏中从网页页面A的URL详细地址切换到网页页面B的URL详细地址。
HTML4中的History API
特性
1.length 历史时间的项数。javascript 所能管到的历史时间被限定在用访问器的“前行”“后退”键能够去到的范畴。本特性回到的是“前行”和“后退”两个功能键之下包括的详细地址数的和。
方式
1.back() 后退,跟按下“后退”键是等效的。
2.forward() 前行,跟按下“前行”键是等效的。
3.go() 用法:history.go(x);在历史时间的范畴内去到特定的1个详细地址。假如 x < 0,则后退 x 个详细地址,假如 x > 0,则前行 x 个详细地址,假如 x == 0,则更新如今开启的网页页面。history.go(0) 跟 location.reload() 是等效的。
HTML5中的History API
1. history.pushState(data, title [, url]):往历史时间纪录堆栈顶部加上1条纪录;data会在onpopstate恶性事件开启时做为主要参数传送以往;title为网页页面题目,当今全部访问器都会 忽视此主要参数;url为网页页面详细地址,可选,缺省为当今页详细地址。
2. history.replaceState(data, title [, url]) :变更当今的历史时间纪录,主要参数同上。
3. history.state:用于储存以上方式的data数据信息,不一样访问器的读写能力管理权限不1样。
4. popstate恶性事件:当客户点击访问器的后退或前行按钮时开启该恶性事件。在恶性事件解决涵数中载入开启恶性事件的恶性事件目标的state特性值,该特性值即为实行pushState方式时所应用的第1个主要参数值,在其中储存了在向访问器历史时间纪录中加上纪录同歩储存的目标。
到现阶段为止,IE10,firefox4以上的版本号,Chrome8以上的版本号,Safari5,Opera11以上的版本号访问器适用HTML5中的History API。
HTML:

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<style>
ul,li{list-style:none;}
.container{width:px;border:px solid #ccc;overflow:hidden;}
.container ul{float:left;width:px;}
.container li{width:px;height:px;line-height:px;overflow:hidden;}
.container li a{text-decoration:none;}
.container li.current a{color:red;}
.all-content{width:px;float:left;overflow:hidden;}
</style>
<script src="jquery-...min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="container">
<ul class="list">
<li>
<a href="http://localhost/html/index.php">检测</a>
</li>
<li>
<a href="http://localhost/html/index.php">检测</a>
</li>
<li>
<a href="http://localhost/html/index.php">检测</a>
</li>
</ul>
<div class="all-content">
<ul class="content">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html> </p> <p>

JS:

拷贝编码
编码以下:

/**
* HTML history and ajax
*/
$(function(){
var ajax,
currentState;
$('.container li').unbind().bind('click',function(e){
e.preventDefault();
var target = e.target,
url = $(target).attr('href');
!$(this).hasClass('current') && $(this).addClass('current').siblings().removeClass("current");
if(ajax == undefined) {
currentState = {
url: document.location.href,
title: document.title,
html: $('.content').html()
};
}
ajax = $.ajax({
type:'POST',
url: url,
dataType:'json',
success: function(data){
var html = '';
if(data.length > ) {
for(var i = , ilist = data.length; i < ilist; i++) {
html += '<li>' +data[i].age+ '</li>' +
'<li>' +data[i].name+ '</li>' +
'<li>' +data[i].sex+ '</li>';
}
$('.content').html(html);
}
var state = {
url: url,
title: document.title,
html: $('.content').html()
};
history.pushState(state,null,url);
}
});
});
window.addEventListener('popstate',function(event){
if(ajax == null){
return;
}else if(event && event.state){
document.title = event.state.title;
$('.content').html(event.state.html);
}else{
document.title = currentState.title;
$('.content').html(currentState.html);
}
});
});

上一篇:HTML5 Canvas的常见线条特性值总结 返回下一篇:没有了