在前端开发中,我们经常需要获取当前页面的URL,以便进行重定向、统计等操作。window.location
和 document.location
是两个经常被使用的对象,它们都提供了一些有用的属性和方法来操作当前页面的URL。
window.location
window.location
对象表示当前窗口中文档的位置(URL),它是 Location
接口的一个实例。我们可以通过访问 window.location
对象上的属性来获取或设置当前页面的URL。
常用属性
href
: 获取或设置当前页面的完整URL。host
: 获取当前页面的域名和端口号。hostname
: 获取当前页面的域名。port
: 获取当前页面的端口号。pathname
: 获取当前页面的路径部分。search
: 获取当前页面的查询字符串部分。hash
: 获取当前页面的哈希值部分。
常用方法
assign(url)
: 加载一个新的文档,并将浏览器的 URL 修改为新文档的 URL。replace(url)
: 加载一个新的文档,但不会在历史记录中生成一条新纪录,而是替换当前文档。reload()
: 重新加载当前页面。
示例代码:
console.log(window.location.href); // https://example.com/path/to/file.html?query=string#hash console.log(window.location.host); // example.com:80 console.log(window.location.pathname); // /path/to/file.html console.log(window.location.search); // ?query=string console.log(window.location.hash); // #hash window.location.assign('https://google.com'); // 跳转到 Google
document.location
document.location
对象是 window.location
的别名,它们表示的是同一个对象。所以对于大部分属性和方法,可以使用两种方式来获取或设置当前页面的URL。
示例代码:
console.log(document.location.href); // https://example.com/path/to/file.html?query=string#hash console.log(document.location.host); // example.com:80 console.log(document.location.pathname); // /path/to/file.html console.log(document.location.search); // ?query=string console.log(document.location.hash); // #hash document.location.assign('https://google.com'); // 跳转到 Google
总结
window.location
和 document.location
都可以用来操作当前页面的URL,它们提供了很多有用的属性和方法来获取、设置和跳转URL。在实际开发中,我们可以根据具体需求来选择使用哪个对象。需要注意的是,由于 document.location
是 window.location
的别名,所以它们之间的关系是一一对应的。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/11711