访问历史API

来源：互联网发布：按键精灵创建js对象编辑：程序博客网时间：2024/06/06 04:23

<!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 />' +    '仰视仰视偶们屯里的羊'};

0 0