实现“跳转到上一页”的三类方法:

总述

一、主要实现方法是 1: javascript:window.history.go(-1); 2: javascript:history.back(); 或javascript:history.back(-1);3: javascript:location.href = document.referrer; 或者javascript:self.location = document.referrer;。因1.2方法类似，演示只演示back(-1)方法，3只演示第一种。

二、主要实现形式是通过设置属性和事件监听来实现，如： 通过设置a标签的href属性来实现、通过设置a标签、input(button)标签的onclick()方法来实现。

    三、注：浏览器对象模型（Browser Object Model (BOM)），可参考： W3C-JavaScript Window - 浏览器对象模型。
  • (1).window为浏览器内置的顶级对象，可以省略不写。所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
  • (2).history对象包含浏览器历史;方法back()为后退，相当于back(-1);方法forward()为前进，相当于forward(1); 方法go(n)表示到历史中某个页面。
  • (3).location对象包含的是当前URL的信息，href属性用于：设置或返回完整的 URL，referrer 属性可返回载入当前文档的文档的 URL,即上一个页面的URL；也可以这样理解:设置a标签的超链接为上一个页面的URL，由此，点击可实现跳转。

方法1：通过设置a标签的href属性来实现：

注意：一定要写 javascript:，因为这是内嵌式js代码(可参考: 使超链接失效的方法1 )。

href="javascript:window.history.back(-1);" href="javascript:location.href = document.referrer;"

方法2：a标签设置onclick()事件:

  • 1.onclick()里面js应用方式为： 行间引用 。

    (1).一定要在后面加上return false;，该语句是用来禁止链接跳转到href的地址(可参考: 使超链接失效的方法2 )， 故href属性的值可以任意。a标签设置onclick()事件,可以省略javascript:，因为这里的事件监听本来就是有js来完成的， 不过建议不要省略。

    (2).如果不想在后面加上return false;，href属性应该设置为javascript:;或为空字符串，使其指向空或不返回任何内容。 但是不推荐不写href属性，因为如果不写改属性，该a标签就没有超链接的默认样式，如：有颜色，下划线，手表悬浮显示指针，即使它被点击后仍然能够实现跳转。

  • 2.onclick()里面js应用方式为： 嵌入式 。

    嵌入式js要注意return false;的位置，要考虑放在哪里才能禁用href，可参考： 我转发的一篇博客 。

href="url" onclick="javascript:window.history.back(-1);return false;" href="url" onclick="location.href = document.referrer; return false;" href="javascript:;" onclick="history.back(-1);" href="" onclick="javascript:window.history.back(-1);return false;" onclick="history.go(-1);" 不设置href，会不显示a标签默认特征：变色，下划线；但是可以实现跳转。 onclick="reload1();"不能返回上一页，没有屏蔽href onclick="return reload1();"可以返回上一页 onclick="reload1(); return false;"可以返回上一页

方法3：input,button标签设置onclick()事件:

可以省略return false;，因为这两个标签是没有超链接的，所以不存在禁用超链接的说法。

*比较各方法的差异，主要是看其是否会刷新页面 测试页面地址

测试页面为一个简单的表单，只含有账号和密码。通过查看账号的状态，查看“返回上一页”后是否会刷新页面。

  • 1.go(-1),back(),bakck(-1)不会刷新原页面，比如表单的text域如果之前有数据，不会刷新；但是密码会消失，这应该是密码框的一种保护机制。
  • 2.行间引用：刷新问题：先go(-1),再reload():360浏览器可以返回，但是不刷新； google不返回；ie不返回。
  • 3.嵌入式：刷新问题：先go(-1),再reload():ie，google，360都能跳转，但是不刷新。
  • 4.go()back()相当于回退页面，而location.href = document.referrer;相当于点击超链接实现跳转，也就是说会刷新页面 ; 按理说如果刷新了本页面，然后点击下面链接是不能跳转到前一页的，但是ie居然可以……
1onclick="javascript:window.history.go(-1);return false;" onclick="javascript:window.history.back();return false;" onclick="javascript:window.history.back(-1);return false;" 2返回上一页面，本应刷新，但是不刷新：onclick="javascript:window.location.reload();return false;" 返回上一页面，重载，本地刷新:onclick="javascript:window.history.back(-1);window.location.reload();return false;" 3返回上一页面，本应刷新，但是不刷新:onclick="reload2();return false;" 4相当于点击超链接，跳转，会刷新：onclick="location.href = document.referrer; return false;"