h5新增 history的应用

最新推荐文章于 2024-07-10 11:49:32 发布

转载最新推荐文章于 2024-07-10 11:49:32 发布 · 175 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/buautifulgirl/p/9741840.html

文章标签：

#php #javascript #数据结构与算法 #ViewUI

本文深入探讨了History API的功能和应用，包括history.back(), history.forward(), history.go(), history.pushState()和history.replaceState()等方法。并通过一个单页面应用程序(SPA)的案例，展示了如何使用这些API来改善用户体验，同时解决SEO问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(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);
        }
    });
}

效果图：