JS获取上一访问页面URL地址——(下)

文章参考自http://www.zhangxinxu.com/wordpress/?p=5957

问题的由来

上篇有提到过document.referrer,在实际中我们会遇到tab切换的问题,如果两个tab使用的是同一个页面的不同路由,当我们按返回键的时候,我们期望的是回到上一页,而不是呆在当前页。

location.replace()方法

可以阻止按钮的默认跳转,然后使用location.replace()替换当前按钮地址。代码如下:

$('#demo').on('click', function (event) {
    event.preventDefault();
    location.replace(this.href);
})

history.replaceState()和location.replace()方法双管齐下

$('#demo').on('click', function (event) {
    event.preventDefault();
    history.replaceState(null, document.title, this.href.split('#')[0] + '#');
    location.replace('');
})

1、首先通过HTML5 history.replaceState()方法把当前URL地址替换成以个井号#结尾的目前链接地址;
2、执行location.replace(”)刷新当前地址(此时#会忽略);

但是这个方法是不适用于ios的谷歌浏览器。

兼容问题

上面双管齐下方法只是解决了移动端项目的这个需求,history.replaceState从IE10才开始支持,如果是PC端项目如果也有类似需求,则上面的代码就不适用,于是,我们有必要整一份所有浏览器都兼容的页面链接跳转历史URL不记录的JS代码片段。
如下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;
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值