JS实现修改地址栏的URL

vener_

于 2024-07-14 12:06:18 发布

阅读量174

点赞数 3

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/vener_/article/details/140414867

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用场景：

如我的项目中，我的页面访问会启动一个后台应用，但是如果不小心刷新的话就会再次启动这个应用会出现bug，之前别的应用自定义了一个变量来作为一个锁，如果上锁则返回错误，但是这次这个应用由于一些原因无法或者逻辑上不应该在接口返回的时候上锁

尝试方案：

尝试了在windows.open的时候使用参数将地址栏锁定，但是手机浏览器上无法实现

window.open(url,'_blank','menubar=no,fullscreen=1,toolbar=no,resizable=no,location=no,status=no');

最终解决方案：

使用history来修改会话记录以达到不刷新页面的情况下修改地址栏

<!DOCTYPE html>
<html>
<head>
    <title>URL更改示例</title>
</head>
<body>
    <h1>当前页面</h1>
    <button onclick="changeUrl()">更改URL</button>

    <script>
        function changeUrl() {
            // 更改地址栏的URL为'/page2'
            history.pushState({page: 2}, 'Page 2', '/page2');
        }
    </script>
</body>
</html>

{page: 2} 是一个状态对象。这个对象可以包含任何你想要存储的与新历史记录条目相关的 JavaScript 数据。这个状态对象的主要用途是，当用户导航回这个条目时，你可以通过 window.history.state 属性访问它。