Eddie Chen


A Front-End Web Developer;

A fakegeek studying at Uestc;

A boy who loves the logic and structure of coding;


Resume

Project List

+

福州金玉堂网站

form 2011 - 2012

福州金玉堂企业网站开发

页面重构, jQuery开发, 基于Ajax的在线聊天子系统, 实时期货价格图表生成(基于Ajax&jsonp)

→ View website

+

diandian.com 数个模板开发

+

中国技术供需在线

form 2011 - 2012

中国技术供需在线-教育部全国高校产学研合作公共服务网络平台

负责一期项目后端开发, 数据库设计

基于PHP, CI框架开发

→ View website

+

电子科技大学校工会新版网站

2011

电子科技大学校工会新版网站

负责后台开发(PHP+CI)以及项目管理

→ View website

+

电子科技大学科技处网站

2010

电子科技大学科技处网站

负责部分页面重构

→ View website

Skill

HTML

80%

CSS & CSS3

70%

Javascript

80%

PHP

60%
*skill scores are based on the test provided by Elance.com.

Blog

浅析 HTML5 History API


HTML5的提供了众多新特性, 其中新的history api 算是比较默默无闻的一个. 在此之前, 我们只能通过history来实现一些简单的前进后退操作, 从HTML5开始, 我们可以通过history api的调用来实现直接对history记录堆栈的操作. 下面我们通过一些具体例子来了解下history api...

basic history operation

使用history.go(), history.back(), history.forward() 能够实现简单的前进后退操作.

// Check the length of the history stack
console.log(history.length);

// Send the user agent forward
history.forward();

// Send the user agent back
history.back();

// Send the user agent back (negative) or forward (positive)
// by a given number of items
history.go(-3);

HTML5 history API

新的html5 history主要涉及 history.pushState(), history.replaceState(), 以及相对应的 window.onpopstate 事件.

首先来看一下兼容性情况:

  • IE: 10+;
  • Chrome: 5+;
  • Safari: 5+;
  • iOS: 5+;
  • Opera: 11.5+;

    data from caniuse

运用这些api能够在不刷新页面的情况下改变页面的URL, 特别是在ajax驱动的页面下. 同时, 还能很好的支持前进和后退操作, 并且在照顾SEO的同时 提供极佳的体验.

Example.
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

history.pushState() 接受3个参数, 一个stateObj, 一个title字符串, 以及新的URL. 其中 新的URL不可以跨域,stateObj须为可序列化对象.

这两行代码能够在history中插入一条浏览记录, 并且更新页面URL(即使这个URL根本不存在);

当发生历史页面跳转时, windows.onpupstate事件触发.

window.addEventListener('popstate', function(e){
    if(history.state){
        //handle the event here
    }
}, false);

通过以上几个的综合使用, 就可以方便实现无刷新页面跳转. 本blog已经运用此特性.


Date:

About

This is Eddie Chen, a front-end web developer, a member of Dreamfly Studio of UESTC.
Keep in touch:
haozi[a,t]haozi.name


Powered by Eddie Chen.