纯js，已封装：利用js检测url参数和插入历史url的方法实现页面刷新定位当前可记忆的位置

最新推荐文章于 2024-07-21 23:04:09 发布

userxxcc

最新推荐文章于 2024-07-21 23:04:09 发布

阅读量465

点赞数 1

分类专栏： js/大前端

本文链接：https://blog.csdn.net/weixin_41827162/article/details/82857411

版权

js/大前端专栏收录该内容

42 篇文章 1 订阅

订阅专栏

纯js，已封装：利用js检测url参数和插入历史url的方法实现页面刷新定位当前可记忆的位置，单个html文件。

具体逻辑请看代码注释。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>纯js，已封装：利用js检测url参数和插入历史url的方法实现页面刷新定位当前可记忆的位置</title>

</head>
<body>


    <div class="location-div cover">
        <div onclick="btn_url(url_num[1])">111111</div>
    </div>
    <div class="location-div option">
        <div onclick="btn_url(url_num[2])">222222</div>
    </div>
    <div class="location-div result">
        <div onclick="btn_url(url_num[0])">33333</div>
    </div>

    <style>
        .hide{ /*必要css*/
            display: none;
        }
    </style>

    <!--位置标记参数-->
    <script>

        /*
        * 配置方法：
        *   1. 保证url_num数组的值与 class="location-div"中有对应的专属class。比如：url0
        *   2. 调用do_you()函数
        * */
        const div_all_class = "location-div"; // 该块的一个公共class
        const div_hide = "hide"; // display=none的css，class名。 用于隐藏不去显示的div，来实现div定位
        const parameter = "location"; // 参数key
        const url_num = ["cover", "option", "result"]; // 参数value

        function btn_url(p) { /*p值通常为下一个url_num[i]*/
            write_url(p); // 更新参数value
            url_location(); // 更新视图显示
            // 其他
            try{
                do_url(p);
            }catch (e) {
                console.log("请调用function do_url(p){console.log(p);}来完成操作");
            }
        }

    </script>

    <!--依赖的公共函数-->
    <script>
        /*匹配url参数*/
        function getThisUrlParam(url, key) { // 返回值
            let url_str = "";
            if(!url){
                url_str = window.location.href;
            }else {
                url_str = url;
            }
            let regExp = new RegExp("([?]|&|#)" + key + "=([^&|^#]*)(&|$|#)");
            let result = url_str.match(regExp);
            if (result) {
                return decodeURIComponent(result[2]); // 转义还原参数
            } else {
                return null; // 没有匹配的键即返回null
            }
        }
        /*向url写入新的div位置*/
        function push_new_url(state, url_data){
            let _state = state;
            let _title = ""; // 默认为空即可
            let _url_data = url_data; // 需要更改的url地址（参数）
            history.pushState(_state, _title, _url_data); // 更新url参数

        }
        /*处理历史返回*/
        window.onpopstate = function(e){
            if(e.state){
                //console.log(e.state); // 之前写入的url参数
                // 其他
                url_location(); // 寻找某个div位置
            }else{
                //console.log("历史返回全部用完");
                url_location(); // 寻找某个div位置
            }
        };
    </script>
    <!--自动处理当前url中div的位置-->
    <script>
        function write_url(p) { /*将位置写入url*/
            let state = {page: p};
            let url_data = "#"+ parameter +"=" + p; // 需要更改的url地址（参数）
            push_new_url(state, url_data);
        }
        function url_location() { /*根据位置标记展示div*/
            let location = getThisUrlParam(window.location.href, parameter);
            if (!location) {
                //console.log("空"+parameter);
                write_url(url_num[0]); // 默认位置
                location = url_num[0];
            } else {
                //console.log(parameter+"=" + location);
            }
            let location_div = document.getElementsByClassName(div_all_class);
            for (let i = 0; i < location_div.length; i++) { /*处理视图*/
                location_div[i].classList.add(div_hide);
                if (location_div[i].className.indexOf(location) > -1) {
                    //console.log("发现"+parameter+"地址=" + i);
                    location_div[i].classList.remove(div_hide);
                }
            }
        }
        url_location(); // 进入页面时的位置初始化
    </script>


</body>
</html>

综合应用实例：https://download.csdn.net/download/weixin_41827162/10693310