历史相关API

时间 2019-11-17

标签历史相关 api 繁體版

原文原文链接

1、history对象

①history.back（）移动到上一个访问页面，等同于浏览器的后退键。php

②history.forward（）动到下一个访问页面，等同于浏览器的前进键。css

③history.go（）接受一个整数做为参数，移动到该整数指定的页面,相对当前，跳出多少条记录，前进参数为正，后退参数为负，另外history.go(0)至关于刷新当前页面。html

2、HTML5新增history相关API

①history.pushState（state，title，url）追加历史浏览历史纪录jquery

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。若是不须要这个对象，此处能够填null。
title：新页面的标题，可是全部浏览器目前都忽略这个值，所以这里能够填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

②history.replaceState（state，title，url）替换修改浏览历史中当前纪录（参数和上面相同）ajax

③window.onpopstate=function( ){ } 监听历史切换事件json

注意：调用history.pushState( )或者history.replaceState( )不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 好比点击后退、前进按钮，或者在JavaScript中调用history.back( )、history.forward( )、history.go( )方法api

3、单页面应用程序（Single Page Application，SPA）

①在一个页面上实现网站的大部分功能，就是单页面应用程序，是一种常见的网页开发模式。即整个网站就只有一个Html文件，每次在切换页面时，不须要请求服务器，只要经过本地的js来切换便可。这样能够减少服务器压力、加强用户体验，增长app的使用流畅性。浏览器

②实现SPA主要有两种方案：服务器

哈希（路由）方案：使用location.hash和hashchange事件实现路由。实际开发辨认的话就是出现“#”，好比：

historyAPI方案：就是利用上述HTML5新增的API来实现。使用这种方案的特色是改变地址栏是不会跳转的。传统的ajax渲染，同时会更改地址栏，优势就是性能好，能够提升用户体验，缺点就是不利于SEO（搜索引擎收录的是源码）。解决方案就是同时更改地址栏，而且地址栏在服务端必定有对应的页面。这样，既能够实现ajax的异步加载，同时也利于SEO优化，而且可使用前进后退按钮切换数据，下面就用例子来讲明这种解决方案。

4、网易云案例

①文件须要使用域名打开,因此首先须要配置一个域名app

②目录文件

③代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易云音乐案例</title>
    <link rel="stylesheet" href="css/index.css">
</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>

template.html

<?php
    $html='发现音乐网页内容';
    $page='index';
    include 'template.html';
?>

index.php .php

<?php
    $html='朋友网页内容';
    $page='friend';
    include 'template.html';
?>

friend.php

<?php
    $html='个人网页内容';
    $page='my';
    include 'template.html';
?>

my.php

<?php
    header("Content-type:text/html;charset=utf-8");
    $page='index';
    $html='发现音乐网页内容';
    if(array_key_exists('page',$_GET)){
        $page=$_GET['page'];
    }
    if($page=='friend'){
        $html='朋友网页内容';
    }
    if($page=='my'){
        $html='个人音乐网页内容';
    }
    echo '{"html":" '.$html.' ","page":" '.$page.' "}';
?>

data.php

*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #f7f7f7;
    font-family: Arial, Helvetica, sans-serif;
}
header{
    background: #242424;
    border-bottom: #000;
}
.wrapper{
    width: 1100px;
    height: 70px;
    margin: 0 auto;
}
.wrapper h1{
    float: left;
    width: 176px;
    height: 69px;
    background: url("../images/topbar.png") no-repeat 0 0;
    font-size: 0;
}
.wrapper ul{
    list-style: none;
}
.wrapper ul li{
    float: left;
    height: 70px;
}
.wrapper ul li.now,
.wrapper ul li:hover{
    background: red;
}
.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;
}

index.css

// 1.ajax异步加载,渲染页面
// 2.渲染什么页面须要和后台提供的地址保持一致
// 3.切换历史渲染页面
$('.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(){
    // 获取地址栏信息
    var pathname=this.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);
}
// 调用ajax函数 (请求方式,请求地址,请求参数)
var render=function(page){
    $.ajax({
        type:'get',
        url:'api/data.php',
        data:{page:page},
        dataType:'json',
        success:function(data){
            // 渲染页面
            $('[data-page]').removeClass('now');
            $('[data-page="'+data.page+'"]').addClass('now');
            $('.content').html(data.html);
        }
    });
}

index.js

④效果展现