您现在的位置是：网站首页> 编程资料编程资料

HTML5 History API 实现无刷新跳转 Html5无刷新修改browser Url的方法详解HTML5之pushstate、popstate操作history,无刷新改变当前urlHTML5无刷新改变当前url的代码基于HTML实现表单提交后不刷新页面 仿163网盘无刷新文件上传 for Php HTML网页中无刷新的更换CSS样式-CSS教程-网页制作-网页教学网HTML5实现无刷新修改URL的方法

2021-08-31 959人已围观

简介 有一次在上**网的时候，发现登陆、注册动画效果非常华丽，但让我感到震惊的是页面竟能够实现无刷新跳转，回顾了所学的前端知识，似乎没有任何技术可以实现这一点，于是百度了一下，才发现这原来是使用HTML5中History API实现的效果

有一次在上**网的时候，发现登陆、注册动画效果非常华丽，但让我感到震惊的是页面竟能够实现无刷新跳转（已改版，观看此效果可以猛击此处：GitHub或阅FM），回顾了所学的前端知识，似乎没有任何技术可以实现这一点，于是百度了一下，才发现这原来是使用HTML5中History API实现的效果，但奈何一直未曾派上用场。直到博客改版时，才将这一技术应用起来。
在HTML5中，
1. 新增了通过JS在浏览器历史记录中添加项目的功能。
2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL。
3. 添加了当用户单击浏览器的后退按钮时触发的事件。
通过以上三点，可以实现在不刷新页面的前提下动态改变浏览器地址栏中的URL，动态显示页面内容。
比如： 当页面A和页面B内容不一样的时候，在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)；在历史的范围内去到指定的一个地址。如果 x < 0，则后退 x 个地址，如果 x > 0，则前进 x 个地址，如果 x == 0，则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。
HTML5中的History API
1. history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会 忽略此参数；url为页面地址，可选，缺省为当前页地址。
2. history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上。
3. history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样。
4. popstate事件：当用户单击浏览器的后退或者前进按钮时触发该事件。在事件处理函数中读取触发事件的事件对象的state属性值，该属性值即为执行pushState方法时所使用的第一个参数值，其中保存了在向浏览器历史记录中添加记录同步保存的对象。
到目前为止，IE10，firefox4以上的版本，Chrome8以上的版本，Safari5，Opera11以上的版本浏览器支持HTML5中的History API。
HTML:

复制代码
代码如下:




New Document

















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 += '
  • ' +data[i].age+ '
    • ' +
    '
  • ' +data[i].name+ '
    • ' +
    '
  • ' +data[i].sex+ '
    • ';
    }
    $('.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新特性Mutation Observer实现编辑器的撤销和回退操作HTML5新特性之type=file文件上传功能HTML5新特性之语义化标签HTML5新特性之用SVG绘制微信logo 整理HTML5的一些新特性与Canvas的常用属性HTML5 history新特性pushState、replaceState及两者的区别 HTML5有哪些新特征Html5新特性用canvas标签画多条直线附效果截图html5声频audio和视频video等新特性详细说明html5新特性与用法大全

    下一篇：图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传 vue.js实现图片文件批量上传代码html+css+js 实现拍照预览上传图片功能基于vue.js框架制作图片上传组件特效源码JS实现手机端多图片上传删除特效源码使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能JS实现的图片上传对比度饱和度调整特效源码HTML5结合zyfile.js插件实现的多文件图片预览上传功能特效源码JS实现上传选择图片功能代码

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网