第一节课
spa 单页应用
- 致命缺点:
SEO
-
hash
hash的作用是网页内部定位
定位页面推荐使用 name值,不使用ID 1、注册
windows.onhashchange
事件(当地址中的hash改变的时候会触发该事件)- 2、获取hash中的地址,然后根据不同的地址,通过ajax请求得到局部网页
- 3、把得到的局部网页渲染到需要显示的container容器中
- 4、具体方法:
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#/">发现音乐</a>|</li>
<li role="presentation"><a href="#my">我的音乐</a>|</li>
<li role="presentation"><a href="#/friend">朋友</a></li>
</ul>
window.onhashchange = function(){
console.log('hash改变了')
}
实例:根据hash值变化切换不同导航对应的不同内容
* 方法1
触发onhashchange
事件时使用ajax进行页面请求然后渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>spa-test</title>
<link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#/">发现音乐</a>|</li>
<li role="presentation"><a href="#/my">我的音乐</a>|</li>
<li role="presentation"><a href="#/friend">朋友</a></li>
</ul>
</div>
<div class="container" id="contanier">
</div>
</body>
<script type="text/javascript">
hashChangeHandler(); //已进入页面就根据hash值显示,而不是等onchnage事件触发后显示
window.onhashchange = hashChangeHandler;
function hashChangeHandler(){
var hash = window.location.hash;
var pathname = hash.substr(1);
if(pathname === '/'){
$.ajax({
type:"get",
url:"./find.html",
async:true,
success:function(data){
console.log(data);
$('#contanier').html(data)
}
});
}else if(pathname === '/my'){
$.ajax({
type:"get",
url:"./my.html",
async:true,
success:function(data){
console.log(data);
$('#contanier').html(data)
}
});
}else if(pathname === '/friend'){
$.ajax({
type:"get",
url:"./friend.html",
async:true,
success:function(data){
console.log(data);
$('#contanier').html(data)
}
});
}
}
</script>
</html>
- 方法2 将所有页面用
script
标签包起来内置在同一个页面当中,script
的type
写成除script
类型之外的 ,例如text/html
;
<script type="text/html" id="friend_html">
<h1>friend</h1>
</script>
<script>
if(pathname === '/friend'){
$('#contanier').html($('#friend_html').html()) //使用这种方法
<!-- $.ajax({-->
<!-- type:"get",-->
<!-- url:"./friend.html",-->
<!-- async:true,-->
<!-- success:function(data){-->
<!-- console.log(data);-->
<!-- $('#contanier').html(data)-->
<!-- }-->
<!-- });-->
<!--}-->
</script>