h5新增 history的应用

(1)history api 的基本介绍：

history.back():上一条 history.forward():下一条 history.go():相对于当前页面的前进或后退

新增加的api: history.pushState() :追加历史

history.replaceState(); 替换历史

上面两个函数都有3个参数 (1.存数据 null 2.标题 null 记录的地址)

window.onpopstate=function(){

监听历史切换事件.

}

单页面应用程序：SPA　（single page application）

实现方案：（1）哈希 hash （2）历史追加特点：改变地址栏是不会跳转的.

ajax 渲染页面优点：提高用户体验缺点：不利于seo

解决方案：ajax渲染页面的同时，更改地址栏（地址栏在服务器端一定要有相对应的页面）

（2）一个 SPA的小案例：

　．template.html代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>history</title>    <style>        *{            padding: 0;            margin: 0;        }        body {            background-color: #F7F7F7;            font-family: Arial;        }        header {            background: #242424;            border-bottom: 1px solid #000;        }        .wrapper{            width: 1100px;            height: 70px;            margin: 0 auto;        }        header .wrapper h1{            float: left;            width: 176px;            height: 69px;            background: url(images/topbar.png) no-repeat 0 0;            font-size: 0;        }        header .wrapper ul{            list-style:none;        }        header .wrapper ul li{            float: left;            height: 70px;        }        header .wrapper ul li.now,        header .wrapper ul li:hover{            background: #12b7f5;        }        header .wrapper ul li a{            padding: 0 20px;            display: block;            color: #fff;            line-height: 70px;            text-decoration: none;        }

        .content{            width: 1100px;            margin: 0 auto;            font-size: 100px;            text-align: center;        }

    </style></head><body><header>    <div class="wrapper">        <h1>网易云音乐</h1>        <ul>            <li data-page="index" class="<?php echo $page=='index'?'now':'' ?>" ><a href="index.php">发现音乐</a></li>            <li data-page="my"  class="<?php echo $page=='my'?'now':'' ?>"><a href="my.php">我的音乐</a></li>            <li data-page="friend" class="<?php echo $page=='friend'?'now':'' ?>"><a href="friend.php">朋友</a></li>        </ul>    </div></header><div class="content">    <?php echo $html ?></div><script src="js/jquery.min.js"></script><script src="js/index.js"></script></body></html>

.index.js代码：

/*1.ajax异步加载 渲染页面*//*2.渲染什么页面需要和后台提供的地址保持一致*//*3.切换历史渲染页面*/$(function () {    $('.wrapper').on('click','a',function () {        //渲染页面  页面标识        var page = $(this).parent().data('page');        render(page);        /*地址保持一致*/        /*追加地址  而且这个地址后台一定要存在*/        var historyUrl = $(this).attr('href');        history.pushState(null,null,historyUrl);        return false;    });    /*监听切换历史*/    window.onpopstate = function () {        /*获取地址栏信息*/        console.log(location.pathname);        /*根据信息判断需要加载什么页面的内容*/        var pathname = location.pathname;        var page = 'index';        if(pathname.indexOf('index.php') > -1 ){            page = 'index';        }else if(pathname.indexOf('my.php') > -1){            page = 'my'        }else if(pathname.indexOf('friend.php') > -1){            page = 'friend';        }        render(page);    }});var render = function (page) {    /*怎么调用ajax 请求方式  请求地址  请求参数  返回数据结构和意义 */    /*发出请求*/    $.ajax({        type:'get',        url:'api/data.php',        data:{            page:page        },        dataType:'json',        success:function (data) {            /*渲染页面*/            /*选中样式*/            $('[data-page]').removeClass('now');            /*data返回了当前页面的标识*/            $('[data-page="'+data.page+'"]').addClass('now');            /*网页内容*/            $('.content').html(data.html);        }    });}

效果图：

转载于:https://www.cnblogs.com/buautifulgirl/p/9741840.html

h5新增 history的应用相关推荐

H5新增、CSS3以及ES5、ES6新增特性
1.H5新增新增特性:语义化标签.音视频处理API.canvas.拖拽释放API.history API.地理位置API.webSocket.web存储的localStorage和SessionSt ...
h5新增浏览器本地缓存localStorage
h5新增属性学习笔记(非原创) html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(se ...
web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:"这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接." Web语义化有三个阶段: 1.h1~h6.t ...
H5新增特性之语义化标签
H5新增特性之语义化标签语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
（14）H5新增表单属性
一.required属性演示 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
（12）H5新增语义化标签布局案例
一.标签语义化以前制作网页布局,我们基本用div来做.div就是一个普通的块级标签,对于搜索引擎来说,是没有语义的. <!DOCTYPE html> <html lang=&quo ...
h5 uniapp history模式下刷新页面404
h5 uniapp history模式下刷新页面404 问题:uniapp 的history 把#去掉了,但是当刷新页面的时候出现404 解决方案需要服务端支持如果 URL 匹配不到任何静态资源, ...
addeventlistener监听ajax请求_基于h5的history改善ajax列表请求体验
信息比较丰富的网站通常会以分页显示,在点"下一页"时,很多网站都采用了动态请求的方式,避免页面刷新.虽然大家都是ajax,但是从一些小的细节还是可以区分优劣.一个小的细节是能否支 ...
html标签：表格、列表、图片、文字、表单、以及h5新增特性
文章目录前言一.表格二.列表三.图片四.文字五.表单六.h5新增特性 1.语义化标签 2.表单新增input属性 3.datalist 4.filedset 5.mark标记标签 6.多 ...