zoukankan      html  css  js  c++  java
  • 根据浏览器history模拟浏览器后退按钮显隐问题

    场景:在APP页面开发中,有一个需求,做一个返回按钮,实现的功能和浏览器的后退按钮相同。

    措施:具体思路如下:

              1.开始打开页面时,浏览器的history.length为1,按钮隐藏;

          2.当history.length>1时,点击按钮执行 history.go(-1);

       3.后退到历史记录栈中第一帧时,按钮隐藏。出于浏览器安全性考虑,history中没有给出属性判断其当前页的位置,所以,在开始打开页面,处于第一帧时,在当前url中添加参数,按钮点击事件触发时,根据该参数可判断是否是第一帧的位置。

    解释:

    一.history对象:

      属性

    • history.length
    • history.state
    • history.scrollRestoration

      方法

    • history.back()
    • history.forward()
    • history.go()
    • history.pushState()
    • history.replaceState()

    二.向当前url中追加参数

    var newurl = updateQueryStringParameter(window.location.href, 'sp', '2');
    
    window.history.replaceState({
        path: newurl
    }, '', newurl);
    
    function updateQueryStringParameter(uri, key, value) {
        if(!value) {
            return uri;
        }
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
        }
        else {
            return uri + separator + key + "=" + value;
        }
    }
  • 相关阅读:
    oracel 备份导出报错 EXP-00091: Exporting questionable statistics
    将多张图片快速制作成一个PDF文件
    自连接表:M可能无下级,可能有下级
    STL迭代器失效总结
    DNS劫持和DNS污染的区别
    snprintf函数用法(转)
    sql查询面试题
    linux获取主机信息
    linux网络通信中的地址形式转换
    printf函数编程小技巧
  • 原文地址:https://www.cnblogs.com/juicy-initial/p/11581590.html
Copyright © 2011-2022 走看看