zoukankan      html  css  js  c++  java
  • window.history,页面中的返回按钮

    一、页面中的返回按钮事件

    window.history可以不加window这个前缀

    他的方法有:

    window.history.go(-1);   //-n表示后退n页,n表示前进n页,或者是一个url
    
    window.history.back();  //同样表示后退一页
    
    window.history.forward();  //表示前进
    如果页面是从一个微信上的链接跳过去的,或者直接在浏览器输入地址进去的,此时回不到上一页,我们可以用 document.referrer 来判断有没有上一页,如果没有可以强制他进入某一个页面
    if (document.referrer === '') {
        // 没有来源页面信息的时候,改成首页URL地址
        $('.jsBack').attr('href', '/');
        }

    二、链接跳转历史URL不记录

    从a页面进入到test3此页面,test3页面跳到test4页面,test4页面跳到test3页面,test4、test3页面循环,此时使用history.back()就会循环返回test4,test3,

    如果有一个需求是我点击返回直接返回到a页面,不进行循环,这时我们可以使用页面链接跳转历史URL不记录,test3跳到test4,test4跳到test3这个跳转历史不记录,于是使用history.back()或者点击返回就能直接返回a页面

    方法如下:
    //页面链接跳转历史URL不记录
        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);  //最终结果是用了这个进行跳转
                }
            }
        };
    
        //这个链接就是不需要进行记录跳转的链接
        document.getElementsByTagName('a')[0].onclick = function (event) {
            if (event && event.preventDefault) {
                event.preventDefault();
            }
            fnUrlReplace(this);
            return false;
        };

    上面的代码中,a连接的跳转使用了 location.replace(href);

    该方法是将地址替换成新url,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,

    因此当使用replace方法之后,你不能通过“前进”和“后 退”来访问已经被替换的URL,这个特点对于做一些过渡页面非常有用!



  • 相关阅读:
    Swift如何判断上午还是下午
    Qt Creator编译app到iPhone
    用swift判断string是否包含字母
    QToolTip显示富文本问题
    mac如何发起屏幕共享?
    Redis持久化
    bean 实例化原理解析
    WebSocket和SocketIO总结
    netty入门
    redis 工具类
  • 原文地址:https://www.cnblogs.com/zhaixr/p/6971214.html
Copyright © 2011-2022 走看看