7-3：使用onhashchange事件来实现最简单的spa单页效果

最新推荐文章于 2022-12-07 08:52:19 发布

yuan1874

最新推荐文章于 2022-12-07 08:52:19 发布

阅读量1k

点赞数

分类专栏：学习笔记文章标签： spa 简单实现单页应用 onhashchange

本文链接：https://blog.csdn.net/y775254773/article/details/80894436

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一节课

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>

yuan1874

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
7-3：使用onhashchange事件来实现最简单的spa单页效果

第一节课 spa 单页应用致命缺点：SEO hashhash的作用是网页内部定位定位页面推荐使用 name值，不使用ID1、注册windows.onhashchange事件（当地址中的hash改变的时候会触发该事件）2、获取hash中的地址，然后根据不同的地址，通过ajax请求得到局部网页3、把得到的局部网页渲染到需要显示的container容器中4、具体方...
复制链接

扫一扫