现今框架(Vue、React等)内置路由(Router)默认一般为Hash路由,包括我自己搭建的博客路由也使用Hash路由

今天主要记录H5的新增API--History,可以实现不刷新操作页面,通过其中API操作浏览器历史记录

history.pushState(state, title, url);
/* state通常作为页面数据状态值
* title即页面标题,一般都为null
* url即页面中的当前路由 如:wwww.baidu.com/*.html
* 调用即会向浏览器历史记录中插入一条数据
*/
history.replaceState(state, title, url);
/*
* 参数与pushState相同
* 区别:repalce会替换当前url路由,且替换浏览器的历史记录
*/
window.onpopstate = function(event) {};
/**
 * 浏览器前进或后退自动调用popstate函数
 * event-[object对象] 即是pushState或replaceState函数中的参数,
*/
history.go();
/*
*  在浏览器历史记录中前进或后退n条记录
* 当n=0或空时会刷新当前页
*/
history.back();
/**
 * 后退一步
*/
history.forward();
/**
 * 前进一步
*/
history.length;
/**
 * 浏览器历史记录长度
*/

下面放一个小demo

<!DOCTYPE html>
<html class="html">

<head>
    <meta charset='utf-8'>
    <title>HTML5-History</title>
</head>

<body>
    <button onclick="redClick()">red</button>
    <button onclick="blueClick()">blue</button>
    <button onclick="greenClick()">green</button>
    <p class="test">test innerText</p>
    <button onclick="consoleLog()">打印</button>
</body>

<script>
    function redClick() {
        history.pushState({
            color: 'red'
        }, 'red', location.href.split('?')[0] + '?color=red')
        fnHashTrigger({
            color: 'red'
        })
    }

    function blueClick() {
        history.pushState({
            color: 'blue'
        }, 'blue', location.href.split('?')[0] + '?color=blue')
        fnHashTrigger({
            color: 'blue'
        })
    }

    function greenClick() {
        history.pushState({
            color: 'green'
        }, 'green', location.href.split('?')[0] + '?color=green')
        fnHashTrigger({
            color: 'green'
        })
    }

    function fnHashTrigger(state) {
        console.log(state)
        if (state) {
            document.querySelector('.test').style.color = state.color || 'red';
        }
    }
    window.addEventListener("popstate", function (event) {
        fnHashTrigger(event.state);
    });

    function consoleLog() {
        console.log(history)
    }
</script>

</html>

谢谢浏览~

Logo

前往低代码交流专区

更多推荐