文档章节

JS可不可以实现:改变地址栏地址而不跳转

放开那个女孩
 放开那个女孩
发布于 2017/04/05 04:18
字数 742
阅读 171
收藏 1

比如:我点击页面上的一个按钮,网址栏中的地址发生改变,但是页面不跳转也不刷新,但是我手动刷新此页面的时候,实际要刷新地址栏中的新地址  其实HTML5早就帮我们解决了 用history.pushState 详情: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history 

 

 

pushState方法

 

pushState()有三个参数:state对象,标题(现在是被忽略,未作处理),URL(可选)。具体细节:

·        state对象 –state对象是一个JavaScript对象,它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象,这个对象的最大存储空间为640k。如果大于这个数 值,则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储,请使用本地存储。

·        title—firefox现在回忽略这个参数,虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串,以防止将来的修改。或者可以传一个简短的标题来表示state

·        URL—这个参数用来传递新的history实体的URL,注意浏览器将不会在调用pushState()方法后加载这个URL。但也许会过一会尝试加载这个URL。比如在用户重启了浏览器后,新的url可以不是绝对路径。如果是相对路径,那么它会相对于现有的url。新的url必须和现有的url同域,否则pushState()将抛出异常。这个参数是选填的,如果为空,则会被置为document当前的url。

某种意义上来说,调用pushState()方法很像设置了window.location = “#foo”,这两者都会创建和激活另一个关联到当前document的history实体,但pushState()另外有一些优点:

l 新的url可以是任何和当前url同域的url,相比之下,如果只设置hash,window.location会保持在同一个document。

l 如果不需要,你可以不修改url。对比而言,设置window.location = “#foo”;仅产生新的history实体,如果你当前的hash不是#foo

l 你可以将任意的数据与你的新history实体关联。使用基于hash的方法,需要将所有相关的数据编码为一个短字符串。

注意,pushState()方法不会使hashchange时间发生,即使是新旧url只是hash不同。

如浏览器地址为http://localhost:8080/tts6/user/teachertts6?pMUploadHomework=success 改变为http://localhost:8080/tts6/user/teachertts6   不用请求后台,直接改变url地址,怎么办了?很简单一句话

//window.location为http://localhost:8080/tts6/user/teachertts6?pMUploadHomework=success

    var state = {title:'',url:window.location.href.split("?")[0]};

    history.pushState(state,'','teachertts6');

//现在浏览器的地址变为http://localhost:8080/tts6/user/teachertts6

© 著作权归作者所有

共有 人打赏支持
放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 0
杭州
程序员
私信 提问
Dreamweaver之简单实现网站布局、图片漂浮、区域跳转、登陆注册及图片查看器

版权声明:本文为博主原创文章,转载请注明CSDN博客源地址!共同学习,一起进步~ https://blog.csdn.net/Eastmount/article/details/84104692 这篇文章是作者《中小型网站开发及web设计》课程...

Eastmount
2018/11/22
0
0
解决window.open() 详解 《弹出框浏览器拦截阻止,和弹出狂隐藏地址栏》 JS页面跳转

最近在做支付宝在线支付,场景:在商务网站选择产品后点击确认购买,把数据传递到后台保存数据库,然后直接执行window.open(URL) 结果发先跳转页面会被浏览器拦截阻止打开窗口!经过研究发现...

郏高阳
2013/04/12
0
7
js中url拼接提示我要换成'&'字符,但是提交之后却不能被转换,导致后台接收不到参数

如题,框架为springboot+mybatis+thymeleaf js中一段简单的url跳转: onclick调用js函数,浏览器地址栏为: http://localhost:8080/?searchText=&pageNo=2 导致后台接收不到pageNo参数,将地址...

韩涛
2017/01/06
679
3
request的setAttribute()怎么用的?

equest.setAttribute()怎么用的? JSP1代码 String [] test=new String[2]; test[0]="1"; test[1]="2"; request.setAttribute("test",test) ; response.sendRedirect("jsp2.jsp"); JSP2代码 ......

巴顿
2013/12/11
0
0
各位兄弟,有谁知道怎么样通过JS创建一个虚拟的文件夹?

如题,通过JS创建一个虚拟的文件夹,并在此文件夹下生成一个虚拟的文件。 不知道有没有什么方法? 我知道通过获取浏览器的地址栏地址并改变之,这样的话会引起跳转,这样会出现404错误,我的...

诸葛非卿
2012/10/22
247
6

没有更多内容

加载失败,请刷新页面

加载更多

Hibernate SQLite方言

以下代码有参考过github上国外某位大佬的,在发文的最新稳定版Hibernate上是可用的,有时间再仔细分析一下 import org.hibernate.dialect.Dialect;import org.hibernate.dialect.function.S...

CHONGCHEN
今天
3
0
CentOS 7 MariaDB搭建主从服务器

本文编写环境为CentOS7。确保关闭SELinux,关闭防火墙或者防打开指定端口。具体信息如下 #master[root@promote ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) [r...

白豆腐徐长卿
今天
10
0
介绍python中运算符优先级

下面这个表给出Python的运算符优先级,从最低的优先级(最松散地结合)到最高的优先级(最紧密地结合)。这意味着在一个表达式中,Python会首先计算表中较下面的运算符,然后在计算列在表上部...

问题终结者
今天
3
0
Spring Boot 2.x基础教程:快速入门

简介 在您第1次接触和学习Spring框架的时候,是否因为其繁杂的配置而退却了?在你第n次使用Spring框架的时候,是否觉得一堆反复黏贴的配置有一些厌烦?那么您就不妨来试试使用Spring Boot来让...

程序猿DD
昨天
10
0
SpringSecurity认证流程源码级详解

SpringSecurity认证流程源码级详解 认证流程说明 认证结果如何在多个请求之间共享 获取认证用户信息

chendom
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部