fengchuanyu 8 месяцев назад
Родитель
Сommit
998f7a8774
2 измененных файлов с 74 добавлено и 0 удалено
  1. 41 0
      7_HTML5/8_历史管理hash.html
  2. 33 0
      7_HTML5/9_历史管理history.html

+ 41 - 0
7_HTML5/8_历史管理hash.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="box"></div>
+    <button id="btn">按钮</button>
+    <script>
+        var oBtn = document.getElementById("btn");
+        let oBox = document.querySelector(".box");
+        var i = 1;
+        var obj = {};
+        oBtn.onclick = function(){
+            // console.log(window.location)
+            // window.location.href = "https://www.baidu.com";
+            // location.hash = "haha";
+            var str = `第${i}个页面`;
+            oBox.innerText = str;
+            location.hash = i;
+            obj['#'+i] = str;
+            i++;
+        }
+
+
+        window.onhashchange = function(e){
+            // console.log(e);
+            // console.log(obj[location.hash]);
+            // console.log(location.hash);
+            if(location.hash in obj){
+                oBox.innerText = obj[location.hash]
+            }else{
+                oBox.innerText = "没有内容"
+            }
+        }
+    </script>
+</body>
+</html>

+ 33 - 0
7_HTML5/9_历史管理history.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id="box"></div>
+    <button id="btn">按钮</button>
+    <script>
+        var oBxo = document.querySelector("#box");
+        var oBtn = document.querySelector("#btn");
+
+        var i = 1;
+        var obj = {};
+        oBtn.onclick = function(){
+
+            history.pushState(i,"");
+            var str = `第${i}个页面`
+            oBxo.innerText = str;
+            obj[i] = str;
+            // console.log(history);
+            i++;
+
+        }
+        window.onpopstate = function(e){
+            console.log(e)
+            oBxo.innerText = obj[e.state]
+        }
+    </script>
+</body>
+</html>