快捷搜索:  汽车  科技

js 实现可 点击跳转的url(如何修改URL而不重新加载页面)

js 实现可 点击跳转的url(如何修改URL而不重新加载页面)

js 实现可 点击跳转的url(如何修改URL而不重新加载页面)(1)

history API

HTML5 History API无疑是现代网站的发展方向,因为它完成了手头的任务,同时还提供了额外的功能。您可以根据需求使用history.pushState()History.replaceState()在浏览器中修改URL:

// 当前 URL: https://my-website.com/page_a // 修改后的URL const nextURL = 'https://my-website.com/page_b'; const nextTitle = 'My new page title'; const nextState = { additionalInformation: 'Updated the URL with JS' }; // 这将在浏览器的历史记录中创建一个新条目,而无需重新加载 window.history.pushState(nextState nextTitle nextURL); // 这将替换浏览器历史记录中的当前条目,而无需重新加载 window.history.replaceState(nextState nextTitle nextURL);

两个方法的参数相同,允许您传递自定义的可序列化状态对象作为第一个参数、自定义标题(尽管大多数浏览器会忽略此参数)以及要在浏览器历史记录中添加/替换的URL。请记住,History API只允许相同的源URL,因此您无法导航到完全不同的网站

Location API

旧的Location API不是该作业的最佳方案,因为它会重新加载页面,但是它仍然允许您修改当前URL,并且在使用旧浏览器时可能会很有用。您可以使用window.location.hreflocation.assign()location.replace()修改URL:

// 当前 URL: https://my-website.com/page_a // 修改后的URL const nextURL = 'https://my-website.com/page_b'; // 这将在浏览器的历史记录中创建一个新条目,然后重新加载 window.location.href = nextURL; // 这将替换浏览器历史记录中的当前条目,然后重新加载 window.location.assign(nextURL); // 这将替换浏览器历史记录中的当前条目,然后重新加载 window.location.replace(nextURL);

如上所述,这三个选项都将导致页面重新加载,这可能是不希望的。此外,与使用History API不同,您只能设置URL,而不需要任何附加参数。最后,Location API不会限制您使用相同的源URL,但使用不同的源URL,这可能会导致安全问题。

猜您喜欢: