HTML页面跳转URL不变的实现方法 - 使用JavaScript History API - 常规

{"title":"HTML页面跳转URL不变的实现方法 - 使用JavaScript History API","description":"本文介绍了如何使用JavaScript History API中的pushState()方法或replaceState()方法实现HTML页面跳转时URL不变的效果，并提供了一个示例代码。","keywords":"HTML, 页面跳转, URL不变, JavaScript, History API, pushState, replaceState","content":"要实现在 HTML 页面跳转时 URL 不变，可以使用 JavaScript 的 History API 中的 pushState() 方法或 replaceState() 方法。\n\npushState() 方法会添加一个新的状态到浏览器的历史记录中，而不会导致页面的刷新或跳转。它接受三个参数：状态对象、新的标题（目前大多数浏览器不支持此参数，可以传入 null）以及可选的新 URL。\n\nreplaceState() 方法与 pushState() 方法类似，但是它会替换当前的历史记录条目，而不是添加一个新的。\n\n以下是使用 pushState() 方法实现 URL 不变的示例：\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>URL 不变示例</title>\n</head>\n<body>\n <button onclick="changePage()">跳转页面</button>\n\n <script>\n function changePage() {\n // 修改 URL 为新的路径，但不导致页面跳转\n history.pushState(null, null, '/new-page');\n }\n </script>\n</body>\n</html>\n\n\n在上面的示例中，点击按钮会调用 changePage() 函数，该函数会使用 pushState() 方法将 URL 修改为 /new-page，但是页面不会发生跳转。"}