深入浅析window.location对象实现页面跳转

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 还有一些不太重要的属性和方法,需要可以查阅文档。