如何做到修改 url 参数页面不刷新

简介: 如何做到修改 url 参数页面不刷新

HTML5 引入了 history.pushState()history.replaceState() 方法,它们分别可以添加和修改历史记录条目。


let stateObj = {
    foo: "bar"
};
 
history.pushState(stateObj, "page 2", "bar.html");


假设当前页面为 foo.html ,执行上述代码后会变为 bar.html ,点击浏览器后退,会变为 foo.html ,但浏览器并不会刷新。 pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个 URL.让我们来解释下这三个参数详细内容:


  • 状态对象 — 状态对象 state 是一个 JavaScript 对象,通过 pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态, popstate 事件就会被触发,且该事件的 state 属性包含该历史记录条目状态对象的副本。


状态对象可以是能被序列化的任何东西。原因在于 Firefox 将状态对象保存在用户的磁盘上,以便在用户重启浏览器时使用,我们规定了状态对象在序列化表示后有 640k 的大小限制。如果你给 pushState() 方法传了一个序列化后大于 640k 的状态对象,该方法会抛出异常。如果你需要更大的空间,建议使用 sessionStorage 以及 localStorage .


  • 标题 — Firefox 目前忽略这个参数,但未来可能会用到。传递一个空字符串在这里是安全的,而在将来这是不安全的。二选一的话,你可以为跳转的 state 传递一个短标题。


  • URL — 该参数定义了新的历史 URL 记录。注意,调用 pushState() 后浏览器并不会立即加载这个 URL,但可能会在稍后某些情况下加载这个 URL,比如在用户重新打开浏览器时。新 URL 不必须为绝对路径。如果新 URL 是相对路径,那么它将被作为相对于当前 URL 处理。新 URL 必须与当前 URL 同源,否则 pushState() 会抛出一个异常。该参数是可选的,缺省为当前 URL。
相关文章
|
15天前
|
缓存 网络协议 前端开发
【高频】从输入URL到页面展示到底发生了什么?
【高频】从输入URL到页面展示到底发生了什么?
|
1月前
|
缓存 网络协议 前端开发
URL输入到页面渲染过程详解
URL输入到页面渲染过程详解
17 1
|
1月前
|
存储 Java 数据库连接
实时计算 Flink版产品使用合集之jdbccatalog中能指定url参数吗
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStreamAPI、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
|
1月前
|
存储 JavaScript 前端开发
js原生方法,获取url上面所有参数,并返回一个对象
JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL,分割查询字符串,解码参数对,并存储在对象中。重复参数键会被存储为数组。
|
1月前
|
JavaScript
js如何实现修改URL参数并不刷新页面
js如何实现修改URL参数并不刷新页面
|
1月前
|
JavaScript
如何在JS中实现修改URL参数而不刷新页面
如何在JS中实现修改URL参数而不刷新页面
|
1月前
|
安全 Java 应用服务中间件
当遇到非法 URL 参数时,如何保障网页正常打开
访问如`http://example.com?a@b=1`的链接出现400 Bad Request错误,这是因为Tomcat不允许请求目标中含有非法字符。Spring Boot 2可通过配置`server.tomcat.relaxed-query-chars`来允许特殊字符,但这样做可能引入安全风险。因此,建议在Nginx层使用`rewrite_by_lua_block`和`ngx.redirect`进行重定向,将非法字符替换为合法形式,如`http://example.com?ab=1`,同时记录日志以监控。此方案能避免直接修改后端代码,提高安全性。
89 0
|
1月前
uView queryParams 对象转URL参数
uView queryParams 对象转URL参数
26 0
|
1月前
|
JavaScript
vue截取URL中的参数
vue截取URL中的参数
28 0
|
1月前
|
分布式计算 DataWorks 关系型数据库
DataWorks数据源问题之参数“连接Url”如何解决
DataWorks数据源是指DataWorks中配置的用于数据集成的外部数据源;本合集将讲解如何在DataWorks中配置和管理数据源,以及处理数据源连接和集成过程中的问题。