如何无刷新更改地址栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无刷新更改地址栏</title>
</head>

<body>
    <button onclick="change()">更改地址栏</button>


    <select id="sel">
        <option value="3">橙</option>
        <option value="2">绿</option>
        <option value="1">黄</option>
    </select>

    <script>
        console.log(66666666, location);

        console.log(location.search.split('=')[1]);

        sel.value = location.search.split('=')[1];


        function change() {
            // 刷新地址栏
            // location.href = './history.html?a=1&b=2';

            // 无刷新更改地址栏    新增一条历史记录
            // history.pushState(null,null,'?a=1&b=2');

            // 无刷新更改地址栏    不会添加历史记录
            history.replaceState(null, null, '?a=1&b=2');
        }


        sel.onchange = function () {
            console.log(sel.value);

            history.replaceState(null, null, `?color=${sel.value}`);

            // 筛选列表功能，页面不刷新更改地址栏里面的搜索条件，  目的：当用户刷新页面之后，页面里面的筛选条件和刷新之前条件是一样的
        }

    </script>
</body>

</html>
posted @ 2023-06-05 22:04  胡猿外  阅读(43)  评论(0)    收藏  举报