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

1822次浏览

前言

最近做了一个项目,三个按钮,动画出现,点击按钮之后,按钮放大,然后页面跳转。我用的是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;
})

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

Tags: htmla标签replaceState

相关文章: