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

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/

时间: 2024-11-05 20:58:05

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

页面链接跳转方法

一.window.location.href 是实现页面链接跳转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浏览器对象</title> <style> div{ width: 500px; margin:0 auto; } </style> </head> <

历史返回,若无页面则跳转到指定页面

开头总要有点废话 这个功能在原先的js分享中 有简单的带过,这里拎出来 详细的讲解下原理和存在的问题(由于是运用html5的新API 所以有兼容问题,推荐移动端使用该方法). 功能描述: 在浏览器中新建标签页并指定一个网址,网页加载完毕后,正常流程下是不允许点击返回的.因为当前标签页的相关历史记录是没有的,所以没有记录可以返回. 应客户要求,需要在这种情况下,给他的历史记录里添加一个链接(比如首页),这样在新打开的页面,点击返回就可以跳转到首页,让用户看到系统的各种功能,推广平台. 知识要点 H

记录各种页面定时跳转方法(倒计时跳转总结)

下面对实现页面定时跳转(也称倒计时跳转)做一下总结,各种定时跳转代码记录如下: (1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) 代码如下: <script type="text/javascript"> //3秒钟之后跳转到指定的页面 setTimeout(window.location.href='http://www.balijieji.com',3); </script> (2)html代码实现,在页面的head区域块内加上

对整站的a链接进行监控,对匹配规则进行指定页面的跳转

项目中有个需求,就是将非本站的链接跳转到过渡页(提示即将离开本站的那种页面).这个时候想起了腾讯邮箱,不安全链接会有新的页面提示,如下图: 本以为ASP.NET中有全局的方法获取到点击或者跳转的链接,结果也没找到.Request和Response都取不到的,HttpModule,HttpHandle,Global中也一样,毕竟跳转之后是到别人的网站上去了.不晓得IIS上能否监控的到.最后只能在a标签上加Onclick了.由于a标签的onclick要比href先执行,所以把a标签统一加上oncli

[转]js实现页面定时跳转

其实很简单的一件事情,使用js提供的setTimeout()函数则可以完成了. 下面是简单的代码实现: [html] view plaincopy <html> <head></head> <body> <h1>提交成功</h1> <a href="http://www.so.com">3秒后系统会自动跳转,也可点击本处直接跳</a> </div></div><

页面的跳转

如果想模拟点击一个链接,使用location.href. 如果想模拟HTTP重定向,使用replace. window.location.replace("http://baidu.com"); window.location.href = "http://baidu.com"; window.location.assign(url): 加载 URL 指定的新的 HTML 文档. 就相当于一个链接,跳转到指定的url,当前页面会转为新页面内容,可以点击后退返回上一个

百度 谷歌 Twitter,这么多短链接服务(Short Url)到底哪家强?

一.短链接是什么 短链接,通俗来说,就是将长的URL网址,通过程序计算等方式,转换为简短的网址字符串. 它的原理也非常简单,就是采用 Domain Redirect(域名重定向) ,将一个域名自动跳转到另一个域名. 根据wikipedia描述,短链接的方案最早在2000年诞生.在2009年11月,著名短链接服务提供商Bitly的访问量是21亿,可见短链接的使用需求是非常大的. 维基地址 而在国内,短链接的普及与微博息息相关. 最早是由新浪仿照Twitter的140短篇博文功能,上线了新浪微博,之

navigator 页面链接

页面链接. 属性名 类型 默认值 说明 url String   应用内的跳转链接 redirect Boolean false 是否关闭当前页面 hover-class String navigator-hover 指定点击时的样式类,当hover-class="none"时,没有点击态效果 注:navigator-hover默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator/>的子节点

基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现

在一个系统里面,往往有很多菜单项目,每个菜单项对应一个页面,一般用户只需要用到一些常用的功能,如果每次都需要去各个层次的菜单里面去找对应的功能,那确实有点繁琐.特别是在菜单繁多,而客户又对系统整体不熟悉的情况下,如果有一个类似浏览器的收藏夹模块,把一些常用的菜单连接保存起来,每次从这个收藏夹主页去找对应的页面,那样确实是省事省力,非常方便.本篇随笔就是介绍在基于Metronic的Bootstrap开发框架里面实现这个收藏夹的思路. 1.系统的收藏夹界面处理效果 为了实现这个收藏夹功能,我们也需要