码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-08-07 15:23:52      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:htm   pre   replace   nts   lin   logs   page   default   class   

1.阻止跳转a标签的链接

2.location.replace(href) 不生成新的历史记录, 但有bug

3.首先通过HTML5 history.replaceState()方法把当前URL地址替换成以个井号#结尾的目前链接地址;

4.执行location.replace(‘‘)刷新当前地址(此时#会忽略);

(function(){
    var fnUrlReplace = function (eleLink) {
        if (!eleLink) {
            return;
        }
        var href = eleLink.href;
        if (href && /^#|javasc/.test(href) === false) {
            if (history.replaceState) {
                // 生成新的URL
                history.replaceState(null, document.title, href.split(‘#‘)[0] + ‘#‘);
                location.replace(‘‘);       // 刷新当前页面URL
            } else {
                location.replace(href);     // 不生成新的历史记录
            }
        }
    };

    document.getElementsByTagName(‘a‘)[0].onclick = function (event) {
        // 阻止跳转
        if (event && event.preventDefault) {
            event.preventDefault();     
        }
        fnUrlReplace(this);
        return false;
    };
}());

参考: http://www.zhangxinxu.com/wordpress/2017/02/page-link-url-history-null-not-record/

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

标签:htm   pre   replace   nts   lin   logs   page   default   class   

原文地址:http://www.cnblogs.com/alantao/p/7298906.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!