1. window.location对象介绍
window.location属性用于获取或设置窗口的URL地址。它是一个表示当前加载文档的 Location 对象。
Location 对象包含了当前 URL 的信息,例如主机名、端口号、协议、URL 参数等等。它还提供了一些方法和属性可以方便地操作 URL。
我们可以通过以下方式获取当前URL:
var currentUrl = window.location.href;
2. window.location对象实现页面跳转
通常我们在前端开发过程中需要实现页面跳转功能,这时候就可以使用 window.location 对象。具体实现方法有三种:
2.1. 直接设置window.location.href属性
设置 window.location.href 属性可以实现当前窗口的跳转,例如:
// 跳转到百度首页
window.location.href = 'http://www.baidu.com';
这行代码会让当前窗口跳转到 http://www.baidu.com 页面。
需要注意的是,在设置 href 属性之后,浏览器会立即开始加载新的页面,当前页面的任务会被中断,所以在执行这段代码之前,一定要确保业务处理完毕。
2.2. 使用window.location.replace方法
window.location.replace 方法与设置 href 属性有些类似,但它不会在历史记录中生成新的记录,而是直接替换当前的记录。例如:
// 以新页面替换当前页面
window.location.replace('http://www.baidu.com');
需要注意的是,使用 replace 方法替换当前文档时,无法通过“后退”按钮回到前一个页面。
2.3. 使用window.location.assign方法
使用 window.location.assign 方法也可以实现页面跳转。这个方法的作用是:URL用指定的URL替换当前页面。例如:
// 跳转到 http://www.baidu.com
window.location.assign('http://www.baidu.com');
与 replace 方法不同,assign 方法会将当前页面添加到浏览器的历史记录中,所以使用“后退”按钮还可以回到前一个页面。
3. window.location属性详解
window.location 属性还有一些常用的属性和方法,下面分别介绍这些属性和方法。
3.1. location.href
href 属性使用最广泛,可以用来读取或设置当前窗口所显示的页面的 URL。如果需要立即跳转到指定页面,也可以把新的 URL 赋值给这个属性。例如:
// 跳转到 http://www.baidu.com
window.location.href = 'http://www.baidu.com';
3.2. location.protocol
protocol 属性用于获取 URL 的协议部分(即 http 或 https)。如果需要动态加载资源,有时需要在协议名前面加上“//”,这样就可以根据当前页面的协议自动选择合适的协议。例如:
// 动态加载jQuery库
var script = document.createElement('script');
script.src = window.location.protocol + '//code.jquery.com/jquery-3.2.1.min.js';
document.head.appendChild(script);
3.3. location.host
host 属性用于获取 URL 的域名和端口号部分。例如:
// 返回 www.baidu.com:80
var host = window.location.host;
3.4. location.hostname
hostname 属性用于获取 URL 的域名部分(即除了端口号之外的部分)。例如:
// 返回 www.baidu.com
var hostname = window.location.hostname;
3.5. location.port
port 属性用于获取 URL 的端口号部分。例如:
// 返回 80
var port = window.location.port;
3.6. location.pathname
pathname 属性用于获取 URL 的路径部分(即除了主机名之外的部分)。例如:
// 返回 /news/123.html
var pathname = window.location.pathname;
3.7. location.search
search 属性用于获取 URL 的查询字符串部分(即 URL 中“?”号后面的部分)。例如:
// 返回 ?id=123
var search = window.location.search;
3.8. location.hash
hash 属性用于获取 URL 的锚点部分(即 URL 中“#”号后面的部分)。例如:
// 返回 #top
var hash = window.location.hash;
3.9. location.reload
reload 方法用于重新加载当前页面。如果需要强制从服务器重新加载页面,可以传递参数 true。例如:
// 重新加载当前页面
window.location.reload();
// 强制从服务器重新加载当前页面
window.location.reload(true);
4. 总结
在前端开发过程中,window.location 对象是非常有用的一个对象,它提供了大量的属性和方法,方便我们实现各种页面跳转和 URL 操作的需求。
除了上述介绍的属性和方法之外,window.location 还有一些不太重要的属性和方法,需要可以查阅文档。