歷史相關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

④效果展現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。