a:active加动画ios点击无效及不记录页面跳转历史解决方案

前言

最近做了一个项目，三个按钮，动画出现，点击按钮之后，按钮放大，然后页面跳转。我用的是a标签，直接加了一个href地址。谷歌中模拟，以及安卓手机中，a标签都是可以跳转的，但是用iphone手机测试，a标签点击无法跳转，今天记录一下我的代码及解决方案。第二个要分享一下如何不记录url跳转历史。

a标签：active加动画点击无效

我的css代码如下：

.haorooms{  -webkit-animation: jpyd 1.5s cubic-bezier(0,.98,.44,1) both;  animation:  jpyd 1.5s cubic-bezier(0,.98,.44,1) both;}
.haorooms:active{ -webkit-animation: zoomOuts 1s ; animation: zoomOuts 1s; }

html代码如下：

<a class="haorooms delay3 " href="/jingpin/"  ></a>

苹果手机中，a标签点击无效。经查验，a标签并没有遮挡，这是什么原因呢？如何解决？

造成这种情况的原因是active有个1秒钟的动画，假如你长按按钮，也是没有办法跳转的。

a标签：active加动画点击无效解决方案

其实这个解决方案是蛮多的，因为我们是在手机中展现，期望效果是在动画播放结束之后跳转，我们可以添加ontouchend事件，touchend之后跳转到某个地址。

ontouchend="window.location.href='/jingpin/'"

加了这个之后，不管是长按，还是点击，按结束之后，都是可以跳转到指定地址的。

页面跳转历史返回中不记录

关于储存浏览历史，我之前文章中有提及过：SPA单页面web应用的一些简介 以及 ajax无刷新页面切换,历史记录后退前进解决方案

我们可以通过

history.replaceState 

history.pushState(state, title, url)

对浏览器历史进行操作。

但是实际情况中，也有我们无需记录浏览历史的情况，例如“一个页面中有2个tab切换标签，tab切换是修改了浏览器地址”，tab切换是默认记录到历史的。因此我们点击返回按钮的时候，不停的在2个tab中切换，但是，实际我们是想返回到上一页的，不是在2个tab中切换。那么这种情况如何解决呢？

这个我们想到了

location.replace(newURL)

replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。

因此代码我们可以如下写：

<ul id="haorooms">
  <li><a href="http://www.haorooms.com/archives">标签一</a></li>
  <li><a href="http://www.haorooms.com/tools/index">标签二</a></li>
</ul>

$('#haorooms li  a').on('click', function (event) { //tab中a标签点击
    event.preventDefault();
    location.replace(this.href);
})

上面代码在某些手机中返回无效，因此方案失败！

history.replaceState()和location.replace()方法

上面方法失败了，我就得转换思路了，看到张鑫旭大神前段时间也有一个类似的案例解决方案，因此我借鉴了一下！

解决方案如下：

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

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

执行location.replace('')刷新当前地址（此时#会忽略）；

通过这个方案，我们再怎么切换tab，点击返回之后，照常返回到进入页面的前一页。不会再在tab中切换了！

因为history.replaceState从IE10才开始支持，假如要兼容更早的浏览器，或者在PC端使用。看到张大神也封装了一个函数，这里我借用一下：

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);
        }
    }
};

上面函数可以如下应用

$('#haorooms li  a').on('click', function (event) {
  if (event && event.preventDefault) {
      event.preventDefault();
   }
   fnUrlReplace(this);
   return false;
})

直接js跳转不记录历史解决方案

原来的跳转方式是：

window.location.href="www.haorooms.com"

跳转不记录历史

history.replaceState(null, document.title,( "www.haorooms.com").split('#')[0] + '#');
location.replace('');

或者动态改动浏览器地址，常用语ajax返回动态修改浏览器地址，或者location跳转不记录历史。

history.replaceState(null, document.title,( '/web/topic/detail/iTopicID/'+ret.data).split('#')[0] + '#');
location.replace('');

今天文章就写到这里，有啥问题，欢迎留言交流！