您当前的位置： 首页 > 学无止境 > 网站建设 网站首页网站建设

javascript劫持浏览器后退键并修改其后退键的url地址

发布时间：2015-07-18 08:27:32编辑：雪饮阅读（）

这是javascript的bom浏览器模型的一次应用。 

或许这个需求有点变态，但是这个需求还是偶尔会用到的，雪饮个人博客最近就遇到了。据说这种需求还是javascript中的一种经典案例呢。不过雪饮个人博客在这里的实现方法是区别于互联网上面那些使用ajax来实现的一种简单的方式。

具体需求是这样的：

我们需要用户进入网站后浏览器的后退键被劫持，我们需要此时若浏览器后退键被点击就进入我们预先定义好的网址路径。

 

对于该需求，雪饮个人博客尝试过使用meta方式跳转，但发现meta方式跳转仅仅能够控制的是跳转的时间和路径，而不能够更多的自定义编程。在这里就显得捉襟见肘了。于是雪饮尝试用history.pushState方法创建历史记录，但这样仅仅只能让浏览器后退按钮改变地址栏的值，并不能够使其页面进行跳转。雪饮再次尝试在页面跳转之前先在当前文档中建立一个cookie（个人直觉认为可行），但后来发现仍旧无法成功，看来直觉有时候并不准确的。那么该怎样处理呢？纠结了两天后答案出来了，请看下面的方法。

需求分析：

浏览器的后退键是在有历史记录产生时才会激活状态的，而要让用户点击后退键进入我们预设的地址，就需要我们建立一个历史记录，那么用户若是后退就会进入我们已经建立的那个历史记录了，一旦用户进入了我们的历史记录，我们就可以根据这个记录所在的hash值来对其进行操纵（貌似有点邪恶）

 

具体实现：

使用history.pushState(null, 'New Page1', 'http://www.gaojiupan.cn/#xy');来创建一个历史记录

使用如下方法对浏览器地址栏的hash值进行实时判断，若符合要求的时候就进行相关的处理：

window.onhashchange=function(){

      if (window.location.hash == "#xy") {

        

}

else {

location.href='http://www.baidu.com.gaojiupan.cn/test/index.php';

}

}