• 页面链接跳转历史URL不记录的兼容处理


    一、跳转历史URL不记录需求的由来

    比方说我们点击首页的“分类”进入分类页,如下图:

    分类进入入口

    然后分类页头部有个“男生”“女生”的频道切换:

    男生女生频道示意

    这两个都是直接的链接,如果就会带来这么一个问题,如果用户在“男生”“女生”的频道之间反复切换,则当我们点击左上角的返回按钮(如下图)的时候,就会发现点击很多次还是在“分类页”上(仅仅频道不一样),这其实是不符合用户预期的。

    左上角的返回按钮

    正常的用户预期应该是点击左上角的返回按钮应该直接回到首页,而不是还在当前页过家家。也就是,虽然技术层面用户刚才的上一页就是“男生”或是“女生”频道页面,但是,我们展现给用户的交互必须是首页。

    页面链接跳转历史URL不记录的兼容处理

    如下fnUrlReplace方法:
    
    var fnUrlReplace = function (eleLink) {
        if (!eleLink) {
            return;
        }
        var href = eleLink.href;
        if (href && /^#|javasc/.test(href) === false) {
            if (history.replaceState) {
                history.replaceState(null, document.title, href.split('#')[0] + '#');
                location.replace('');
            } else {
                 location.replace(href);
            }
        }
    };
    
    其中eleLink参数表示<a>链接DOM元素,理论上,fnUrlReplace()方法兼容到IE6。
    要想实现最终的效果,还需要和事件关联。举个简单的例子,假设页面上有个<a>链接,希望点击的时候不进入历史记录堆栈,则可以这样:
    document.getElementsByTagName('a')[0].onclick = function (event) {
        if (event && event.preventDefault) {
            event.preventDefault();
        }
        fnUrlReplace(this);
        return false;
    };
     
  • 相关阅读:
    虚拟DOM和diff算法
    面向对象之封装
    面向对象之类和函数的属性
    面向对象之__init__方法
    面向对象之初始类和对象
    面向对象与面向过程详解
    CSS高级技巧
    CSS定位
    模块之re模块详解
    模块之logging模块详解
  • 原文地址:https://www.cnblogs.com/ouchen0312/p/7274080.html
Copyright © 2020-2023  润新知