javascript - 用js修改URL参数的最佳方法
问题描述
我试图修改 URL 参数,但我找不到完美的方法。
首先我尝试了:
window.location.href = window.location.href + '?test';
问题是,页面重新加载,它只是添加到 url。
然后我尝试了:
window.location.href = String( window.location.href ).replace( "?test", "" );
这很完美,我想要替换的部分被替换/删除,但页面每次都会重新加载......
然后我读到:
window.history.pushState( {} , 'test', '?test' );
但这在某种程度上不起作用......
我的目标是在单击按钮以控制功能时添加和替换/删除 URL 字符串。
例如 URL 是http://www.example.com/?showoverlay&?showhint
例如,这显示了基于这些 URL 参数的叠加层和提示工具提示。当用户关闭覆盖时,应该删除“showoverlay”部分而不重新加载页面。所以网址是:
解决方案
您是否尝试过使用 replaceState?它会在不重新加载页面的情况下替换历史记录,并且可能适合您的用例。
window.history.replaceState(data, title [, url ] );
https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method
如果您需要保留 url 的其他部分,请确保将其存储在单独的变量中并将其附加回 url。
这大致是您如何获取 URL 的每个部分:
let url = window.location.origin + window.location.pathname + window.location.search
然后你只需将它添加回来
window.history.replaceState({}, '', url + '&yourNewParameters=value')
推荐阅读
- python - 使用 tensorflow 进行图像分类:三种不同的方法使用相同的模型和相同的测试数据评估结果,但产生不同的结果
- flutter - Flutter mapbox_search:有什么方法可以获取地址的城市名称吗?
- python - 退出 pynput 侦听器线程的问题
- python - 如何获取数组的索引?
- visual-studio-code - 如何在 VS Code 源代码控制中删除大量未跟踪和待处理的更改
- flutter - 更新 GridView.Builder() 中的单个项目而不重建整个树
- kubernetes - fsGroup vs 补充组
- laravel - 小数列类型的 Laravel 默认值
- java - 使用hashmap java将两个键的值与第三个键相加
- wordpress - 将 Amalink Pro 插件与 Amazon API 密钥连接时出错