h5新增 history的应用
生活随笔
收集整理的這篇文章主要介紹了
h5新增 history的应用
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
(1)history api 的基本介紹：
history.back():上一條 history.forward():下一條 history.go():相對(duì)于當(dāng)前頁(yè)面的前進(jìn)或后退
新增加的api: history.pushState() :追加歷史
history.replaceState(); 替換歷史
上面兩個(gè)函數(shù)都有3個(gè)參數(shù) (1.存數(shù)據(jù) null 2.標(biāo)題 null 記錄的地址)
window.onpopstate=function(){
監(jiān)聽(tīng)歷史切換事件.
}
單頁(yè)面應(yīng)用程序：SPA （single page application）
實(shí)現(xiàn)方案：（1） 哈希 hash （2）歷史追加 特點(diǎn)：改變地址欄是不會(huì)跳轉(zhuǎn)的.
ajax 渲染頁(yè)面 優(yōu)點(diǎn)：提高用戶體驗(yàn) 缺點(diǎn)：不利于seo
解決方案：ajax渲染頁(yè)面的同時(shí)，更改地址欄（地址欄在服務(wù)器端一定要有相對(duì)應(yīng)的頁(yè)面）
（2）一個(gè) 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>網(wǎng)易云音樂(lè)</h1>
<ul>
<li data-page="index" class="<?php echo $page=='index'?'now':'' ?>" ><a href="index.php">發(fā)現(xiàn)音樂(lè)</a></li>
<li data-page="my" class="<?php echo $page=='my'?'now':'' ?>"><a href="my.php">我的音樂(lè)</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異步加載 渲染頁(yè)面*//*2.渲染什么頁(yè)面需要和后臺(tái)提供的地址保持一致*/
/*3.切換歷史渲染頁(yè)面*/
$(function () {
$('.wrapper').on('click','a',function () {
//渲染頁(yè)面 頁(yè)面標(biāo)識(shí)
var page = $(this).parent().data('page');
render(page);
/*地址保持一致*/
/*追加地址 而且這個(gè)地址后臺(tái)一定要存在*/
var historyUrl = $(this).attr('href');
history.pushState(null,null,historyUrl);
return false;
});
/*監(jiān)聽(tīng)切換歷史*/
window.onpopstate = function () {
/*獲取地址欄信息*/
console.log(location.pathname);
/*根據(jù)信息判斷需要加載什么頁(yè)面的內(nèi)容*/
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) {
/*怎么調(diào)用ajax 請(qǐng)求方式 請(qǐng)求地址 請(qǐng)求參數(shù) 返回?cái)?shù)據(jù)結(jié)構(gòu)和意義 */
/*發(fā)出請(qǐng)求*/
$.ajax({
type:'get',
url:'api/data.php',
data:{
page:page
},
dataType:'json',
success:function (data) {
/*渲染頁(yè)面*/
/*選中樣式*/
$('[data-page]').removeClass('now');
/*data返回了當(dāng)前頁(yè)面的標(biāo)識(shí)*/
$('[data-page="'+data.page+'"]').addClass('now');
/*網(wǎng)頁(yè)內(nèi)容*/
$('.content').html(data.html);
}
});
}
效果圖：
?
轉(zhuǎn)載于:https://www.cnblogs.com/buautifulgirl/p/9741840.html
總結(jié)
以上是生活随笔為你收集整理的h5新增 history的应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： scanperiod 不生效
- 下一篇： 思维风暴 codeforces (106