js改变地址栏而不跳转页面

今天做项目的时候突然遇到一个需求,实现js改变地址栏地址而不跳转新页面,上网搜没有搜到我想要的方法,后来自己很奇妙的碰对了,贴出来分享一下
 
我的背景是从一个页面点击链接跳转到本页面(http://caojiejun.snslearn.com/open/Index/openAp)时会自动到所要跳转的内容段,这个时候肯定需要它带过来一个参数,在这里即是    apiAgreement。所以网址是http://caojiejun.snslearn.com/open/Index/openAp?id=apiAgreement
 
我在本页面的时候也有一个地方点击能跳转到一样的位置,但是我可以直接在本页面由显示隐藏来控制跳转,就免去了刷新页面带来的其它比较困扰的问题。而且效率快。那么问题来了,这个网址复制到新窗口打开的时候并不是这个内容页。
恩,这个时候如果我能改变网址并且不让它重新跳转,就很完美了。
 
接下来优化:
其它页面点击跳转的链接改成(传参方式改变):http://***.com/open/Index/openApi#/apiAgreement
 
这里顺便贴一下本页面获取参数的函数:
function get_url_params() { //获取url里面的id参数
     var w_t =  window.location.href.split('/');
     var len = w_t.length - 1;
     var w_id = w_t[len];
     return w_id;
}
 
在本页面改变url网址:
点击事件
{
  var id=$(this).attr("data-id");
  window.location.href = "#/"+id;
}
 
当前网址就变成了http://***.com/open/Index/openApi#/   +你点击事件里面的id。并且没有刷新页面,网址复制到新窗口也是想要的效果。

猜你喜欢

转载自www.cnblogs.com/bber/p/9656008.html
今日推荐