BOM學習實用路線(4)——BOM刷新與跳轉及BOM的hash簡述

刷新與跳轉



<!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>
<button>跳轉</button>
<script>
    {
        let btn = document.querySelector("button");

        btn.onclick = ()=>{
            location.href = "https://www.baidu.com/s?wd=CSDN";
        };
    }
</script>
</body>
</html>

在這裏插入圖片描述

location.replace: 替換掉地址欄信息

    let btn = document.querySelector("button");

    btn.onclick = function(){
        location.replace("https://www.baidu.com/s?wd=CSDN");

效果是一樣的!
在這裏插入圖片描述


刷新:reload方法

  let btn = document.querySelector("button");

  btn.onclick = ()=>{
      location.reload();
  };

在這裏插入圖片描述

刷新的另一個方式

   let btn = document.querySelector("button");

   btn.onclick = ()=>{
       location.href = location.href;   // 刷新的另一個方式
   };

hash函數

   let btn = document.querySelector("button");

   btn.onclick = ()=>{
       console.log(location.hash);
   };

在地址欄添加“#內容”,hash值實際就是#號後面的值
hash應用:前端路由(後面的篇章再詳述)
在這裏插入圖片描述




(後續待補充)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章