JS实用功能-5、HTML 点击返回按钮返回上一页，没有上一页转到首页

大家都知道用JS实现返回上一页的功能很简单，也有几种方法，比如以下：

点击function，下面两种都可以

function back(){
    history.go(-1);
}

function back(){
   history.back();
}

在a标签中实现：

<a class="back" href="javascript:history.back();"></a>

上面三种已经基本上实现了返回上一页的功能，但是有一种情况没有考虑到（我们程序员还是要严谨一点嘛），就是假如该页面是别人分享过来的而不是通过其他页面进入的呢？

那么点击该按钮将不会有任何反应，因为此时history对象中不存在历史记录，也就是说这是你浏览器窗口打开时浏览的第一个页面。

为了优化用户体验，这里通常有两种解决方案。

一种是在打开第一个页面时不显示返回上一页按钮，另一种是点击直接返回到网站首页。

要实现这两种，需要用到document下的一个属性，referrer。

referrer属性的作用是保存着链接到当前页面的那个页面的URL。

通过判断document.referrer是否为空，来判断是否含有历史记录URL。

不显示返回按钮：

if(document.referrer){
 $('#newheaderback').css('display','none');
}

 

返回首页：

$('#newheaderback').click(function() {
      if (document.referrer === '') {
        location.href = '/';
        return;
      }
      history.go(-1);
    });