龙空技术网

JavaScript:如何修改URL而不重新加载页面?

aaliss 779

前言:

眼前姐妹们对“js转url”大概比较重视,兄弟们都想要分析一些“js转url”的相关内容。那么小编也在网上网罗了一些对于“js转url””的相关资讯,希望看官们能喜欢,大家快快来了解一下吧!

History API

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

// 当前 URL:  修改后的URLconst nextURL = ';;	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.href、location.assign()或location.replace()修改URL:

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

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

标签: #js转url