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,这个特点对于做一些过渡页面非常有用!



  • 相关阅读:
    XidianOJ 1099 A simple problem
    XidianOJ 1097 焊板子的xry111
    XidianOJ 1172 Hiking
    XidianOJ 1176 ship
    bzoj1912(树的直径)
    黑暗城堡(最短路径树)
    poj1639(k限制最小生成树)
    0-1分数规划
    tyvj1391(Kruskal)
    [Usaco2007 Nov]Cow Relays(矩阵乘法+floyd)
  • 原文地址:https://www.cnblogs.com/zhaixr/p/6971214.html
Copyright © 2011-2022 走看看