访问历史API

最新推荐文章于 2021-12-19 15:44:24 发布

zoekitty

最新推荐文章于 2021-12-19 15:44:24 发布

阅读量371

点赞数

分类专栏： html5 文章标签：历史API

本文链接：https://blog.csdn.net/zoekitty/article/details/52735851

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>History Api</title>
  <style>
    html,
    body {
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
    
    aside {
      background-color: #ccc;
      width: 220px;
      float: left;
      height: 100%;
    }
    
    aside ul {
      font-size: 20px;
      line-height: 2;
    }
    
    aside ul li {
      cursor: pointer;
    }
    
    article {
      background-color: #f5f5f5;
      margin-left: 220px;
      padding: 20px;
      height: 100%;
      overflow: scroll;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <aside>
    <ul id="list" data-id="1" data-name="sss">
    </ul>
  </aside>
  <article>
    <p id="content"></p>
  </article>
  <!-- plugin:auto file name -->
  <script src="data.js"></script>
  <script>
    (function() {
      var listElement = document.querySelector('#list');
      for (var title in data) {
        var liElement = document.createElement('li');
        liElement.innerHTML = '⭐️' + title;
        liElement.setAttribute('data-title', title);
        listElement.appendChild(liElement);
      }

      var liElements = document.querySelectorAll('#list>li');

      var content = document.querySelector('#content');
      // 注册美哦一个元素事件
      for (var i = 0; i < liElements.length; i++) {
        liElements[i].addEventListener('click', function() {
          // 拿到被点击title
          var title = this.dataset['title'];
          // 赋值
          content.innerHTML = data[title];
          // 操作历史记录
          if (window.history && history.pushState) {
            // 添加一个新的历史记录
            history.pushState(title, 'title没有任何浏览器支持', '?t=' + title);
          } else {
            console.log('不支持');
          }
        });
      }

      // 当我们在伪造的访问历史中前进或后退时会执行一个popstate事件
      window.addEventListener('popstate', function(e) {
        content.innerHTML = data[e.state];
      });

      // window.location = "https://www.baidu.com";
      // 第一次请求过来 获取地址栏中的t参数
      // window.location可以拿到当前网页中跟地址相关的信息
      var search = window.location.search; // ?t=jkaljdksfla
      // 如果地址栏中的地址有中文，会以URL编码方式呈现
      // decodeURI 可以转换到之前中文
      var title = search.split('=')[1]; // ['?t','jkaljdksfla']
      if (title) {
        // 有值 decodeURI作用就是从URL编码转换到之前的状态
        console.log(decodeURI(title));
        content.innerHTML = data[decodeURI(title)];
      }
    })();
  </script>
</body>

</html>

下面是引入的data.js

/*
 * @Author: iceStone
 * @Date:   2015-12-01 15:25:37
 * @Last Modified by:   iceStone
 * @Last Modified time: 2015-12-04 12:23:02
 */

'use strict';

var data = {
  "五环之歌": '作曲 : 唐诃/吕远 \n <br />' +
    '作词 : 岳云鹏/MC Hotdog \n <br />' +
    '我把车子开上五环 \n <br />' +
    '我把车子开上五环 \n <br />' +
    '快点把车子开上五环 \n <br />' +
    '什么都不管 \n <br />' +
    '我就是要上五环 \n <br />' +
    '啊～～～五环 你比四环多一环（fifth Ring） \n <br />' +
    '啊～～～五环 你比六环少一环（ I\'m driving on the fifth ring）  \n <br />' +
    '终于有一天 你会修到七环 \n <br />' +
    '修到七环怎么办 你比五环多两环 \n <br />' +
    '热狗： \n <br />' +
    '车一直塞 表情痴呆 早就习惯漫无目的一直开 \n <br />' +
    '那五环依然那么自在 \n <br />' +
    '它一直在 \n <br />' +
    '腐烂的喇叭声 苦难的师傅一直唉～ \n <br />' +
    '北京的 style 在上下班 车子一直排 \n <br />' +
    '为了生活 为了梦想 为了放假单 \n <br />' +
    '或许有天 我们必须要去 那八环 \n <br />' +
    'Rest in peace 北京的交通 我为你放花篮 \n <br />' +
    '岳云鹏： \n <br />' +
    '啊～～～五环 你比四环多一环（fifth Ring） \n <br />' +
    '啊～～～五环 你比六环少一环（ I\'m driving on the fifth ring）  \n <br />' +
    '终于有一天 你会修到七环 \n <br />' +
    '修到七环怎么办 你比五环多两环 \n <br />' +
    '热狗： \n <br />' +
    '多少人明知山有虎 却偏向虎山行 \n <br />' +
    '我明明知道五环堵 \n <br />' +
    '这条回家路 祸不单行 \n <br />' +
    '要塞啊！ 就塞啊！哼 ！ 我不担心 \n <br />' +
    '一辈子没有洗过车 我车子不干净 \n <br />' +
    '这烟抽的看起来多淡定 \n <br />' +
    '这边苦苦的笑容呢？吐出了叹气 \n <br />' +
    '你还想看什么戏 \n <br />' +
    '在车上乖乖吃着你的煎饼 \n <br />' +
    '快点上五环 因为或许先上先赢 \n <br />' +
    '我把车子开上五环 \n <br />' +
    '我把车子开上五环 \n <br />' +
    '快点把车子开上五环 \n <br />' +
    '什么都不管 \n <br />' +
    '我就是要上五环 \n <br />' +
    '五环五环 \n <br />' +
    '五环五环 \n <br />' +
    '这是五环五环 \n <br />' +
    '什么都不管 \n <br />' +
    '我现在就上五环',
  "我的滑板鞋": '有些事我都已忘记 \n <br />' +
    '但我现在还记得 \n <br />' +
    '在一个晚上我的母亲问我 \n <br />' +
    '今天怎么不开心 \n <br />' +
    '我说在我的想象中有一双滑板鞋 \n <br />' +
    '与众不同最时尚跳舞肯定棒 \n <br />' +
    '整个城市找遍所有的街都没有 \n <br />' +
    '她说将来会找到的时间会给我答案 \n <br />' +
    '星期天我再次寻找依然没有发现 \n <br />' +
    '一个月后我去了第二个城市 \n <br />' +
    '这里的人们称它为魅力之都 \n <br />' +
    '时间过的很快夜幕就要降临 \n <br />' +
    '我想我必须要离开 \n <br />' +
    '当我正要走时我看到了一家专卖店 \n <br />' +
    '那就是我要的滑板鞋 \n <br />' +
    '我的滑板鞋时尚时尚最时尚 \n <br />' +
    '回家的路上我情不自禁 \n <br />' +
    '摩擦 摩擦 \n <br />' +
    '在这光滑的地上摩擦 \n <br />' +
    '月光下我看到自己的身影有时很远有时很近 \n <br />' +
    '感到一种力量驱使我的脚步 \n <br />' +
    '有了滑板鞋天黑都不怕 \n <br />' +
    '一步两步一步两步 一步一步似爪牙 \n <br />' +
    '似魔鬼的步伐 \n <br />' +
    '摩擦 摩擦 \n <br />' +
    '我给自己打着节拍 \n <br />' +
    '这是我生命中美好的时刻 \n <br />' +
    '我要完成我最喜欢的舞蹈 \n <br />' +
    '在这美丽的月光下在这美丽的街道上 \n <br />' +
    '我告诉自己这是真的这不是梦 \n <br />' +
    '一步两步一步两步 一步一步似爪牙 \n <br />' +
    '似魔鬼的步伐 \n <br />' +
    '摩擦 摩擦 \n <br />' +
    '在这光滑的地上摩擦 \n <br />' +
    '摩擦似魔鬼的步伐 \n <br />' +
    '似魔鬼的步伐 \n <br />' +
    '一步两步一步两步 一步一步似爪牙 \n <br />' +
    '似魔鬼的步伐 \n <br />' +
    '摩擦 摩擦 \n <br />' +
    '在这光滑的地上摩擦 \n <br />' +
    '摩擦',
  "咱们屯里人": '作曲 : 杨柏森 \n <br />' +
    '作词 : 马金萍 \n <br />' +
    '偶滴老嘎 就组在则个屯 \n <br />' +
    '偶系则个屯里 土生土长滴羊 \n <br />' +
    '别看屯子不仔大呀 有山有水有速棱 \n <br />' +
    '邻里先情挺和睦 老少爷们更滑群 \n <br />' +
    '屯子磊面发生过 黑多黑多的事 \n <br />' +
    '回想系那是特别的梗 \n <br />' +
    '朋友们若系有森确呀 我领你仰视仰视 \n <br />' +
    '仰视仰视偶们屯里的羊 \n <br />' +
    '偶滴老嘎 就组在则个屯 \n <br />' +
    '偶系则个屯里 土生土长滴羊 \n <br />' +
    '别看屯子不仔大呀 有山有水有速棱 \n <br />' +
    '邻里先情挺和睦 老少爷们更滑群 \n <br />' +
    '屯子磊面发生过 黑多黑多的事 \n <br />' +
    '回想系那是特别的梗 \n <br />' +
    '朋友们若系有森确呀 我领你仰视仰视 \n <br />' +
    '仰视仰视偶们屯里的羊'
};

zoekitty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
访问历史API

History Api html, body { height: 100%; overflow: hidden; margin: 0; padding: 0; } aside { background-color: #ccc; width: 220px; float:
复制链接

扫一扫

专栏目录