JavaScript window.location对象

JavaScript中的window.location对象用于获取或设置浏览器当前打开页面的URL地址信息，它包含了当前页面的所有信息，如：协议、主机名、路径、查询字符串等等。接下来我们将详细讲述该对象的使用。

获取当前页面信息

我们可以使用window.location对象来获取当前页面的相关信息，如下所示：

// 获取当前页面的协议，如：http、https、file等等
var protocol = window.location.protocol;

// 获取当前页面的主机名及端口号，如：www.example.com:8080
var host = window.location.host;

// 获取当前页面的主机名，如：www.example.com
var hostname = window.location.hostname;

// 获取当前页面的URL地址，如：https://www.example.com/path/to/file?search_query=hello
var href = window.location.href;

// 获取当前页面的路径，如：/path/to/file
var pathname = window.location.pathname;

// 获取当前页面的查询字符串，如：search_query=hello
var search = window.location.search;

// 获取当前页面的 hash值，如：#top-header
var hash = window.location.hash;

设置当前页面信息

我们可以使用window.location对象来跳转到其他URL地址：

// 跳转到新的页面
window.location.href = "https://www.example.com/new-page";

跳转页面的时候，还可以选择是否在浏览器的历史记录中保留当前页面：

// 在历史记录中不保留当前页面
window.location.replace("https://www.example.com/new-page");

// 在历史记录中保留当前页面
window.location.assign("https://www.example.com/new-page");

以上是window.location对象的简单使用，下面来看一个实际的案例。

示例1：根据页面url参数进行搜索

例如在一个博客网站上，用户可以通过搜索框搜索关键词，我们可以根据页面URL中的查询字符串来进行搜索。代码如下：

// 获取当前页面的查询字符串
var searchQuery = window.location.search;

// 去掉查询字符串前面的问号，如：search_query=hello
searchQuery = searchQuery.substr(1);

// 将查询字符串解析成对象，如：{ search_query: 'hello' }
var queryObject = {};
searchQuery.split("&").forEach(function(item) {
  var pair = item.split("=");
  queryObject[pair[0]] = decodeURIComponent(pair[1]);
});

// 获取搜索框输入的关键词，如：hello
var keyword = queryObject.search_query;

// 根据关键词调用搜索API，如：https://www.example.com/api/search?q=hello
var searchResult = [];
searchAPI("https://www.example.com/api/search?q=" + encodeURIComponent(keyword), function(result) {
  searchResult = result;
  renderSearchResult();
});

示例2：检查用户是否访问了https网站

例如，在一个网站上，为了保证用户的安全性，我们希望用户只能通过https访问网站。我们可以使用window.location对象的protocol属性来检查用户关闭了https。代码如下：

// 检查用户是否通过https访问网站
if (window.location.protocol !== "https:") {
  window.location.replace("https://" + window.location.host + window.location.pathname);
}

以上就是window.location对象的完整攻略。