用window.history历史记录实现:点击浏览器后退按钮随机跳转网页、无限循环

本文由清尘发表于2019-05-21 20:04最后修改于2019-05-23属于javascript分类

查看演示

效果描述:点击浏览器后退按钮在goUrl 数据里面随机跳转一个网页。无限循环

index.html

    <a class="link" href="hi.html">点击进行测试</a>

hi.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
</head>
<body>
  

<script>
window.onload = function(){


  var goUrl = ['https://blog.ipsfan.com/5726.html','https://blog.ipsfan.com/5723.html','https://blog.ipsfan.com/5776.html','https://blog.ipsfan.com/5710.html','https://blog.ipsfan.com/5704.html','https://blog.ipsfan.com/5576.html','https://blog.ipsfan.com/5714.html','https://blog.ipsfan.com/5511.html','https://blog.ipsfan.com/5260.html'];
  var goNum = RandomNumBoth(0,8);
  window.history.pushState('','','hi.html');

  window.location.reload();
  window.location.href = goUrl[goNum];

  console.log(goNum)
  console.log(goUrl[goNum])

  function RandomNumBoth(Min,Max){
      var Range = Max - Min;
      var Rand = Math.random();
      var num = Min + Math.round(Rand * Range); 
      return num;
	}


}

  </script>
</body>
</html>

===============

第二个演示: 点击查看

效果描述:第一次进入页面由goUrl数组里面的url随机跳转。点击浏览器后退按钮按顺序显示 backUrl 数组里面的url,达到数组最后一个url后,再次进入goUrl数组里面的url随机跳转。以上无限循环

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
</head>
<body>

<script>
window.onload = function(){

  var goUrl = ['https://blog.ipsfan.com/5808.html','https://blog.ipsfan.com/5726.html','https://blog.ipsfan.com/5723.html'];
  var backUrl = ['https://blog.ipsfan.com/category/weibo','https://blog.ipsfan.com/category/all/mwebdevelopment','https://blog.ipsfan.com/category/all/wordpress'];
 
  if(sessionStorage.getItem('back') == 'true'){
    // 返回页面
    var goNum = parseInt(sessionStorage.getItem('gonum'));
    var curUrl = backUrl[goNum];
    window.history.pushState('','','index.html');
    window.location.reload();

    if(goNum){
      var goCurNum = goNum;
      goCurNum++;
    }else{
      var goCurNum = 1;
    }

    if(goCurNum>=backUrl.length){
      sessionStorage.setItem('back','false');
    }
    sessionStorage.setItem('gonum',goCurNum);

    window.location.href = curUrl;
  }else{
    // 随机进入页面
    window.addEventListener('pageshow', function (e) {
            // 通过persisted属性判断是否存在 BF Cache
            if (e.persisted) {
                location.reload();
            }
        });

    var goNum = RandomNumBoth(0,(goUrl.length)-1);
    var curUrl = goUrl[goNum];
    
    window.history.pushState('','','index.html');
    window.location.reload();

    sessionStorage.setItem('back','true');
    sessionStorage.setItem('gonum',0);
    window.location.href = curUrl;
  }
 

  function RandomNumBoth(Min,Max){
      var Range = Max - Min;
      var Rand = Math.random();
      var num = Min + Math.round(Rand * Range); 
      return num;
	}


}

  </script>
</body>
</html>