正文

如何用JavaScript获取并调用当前页面的URL

/0 浏览量
0421

在Web开发中，经常需要获取当前页面的URL进行一些操作，比如获取参数、分析URL结构等。下面将详细介绍如何使用JavaScript获取并调用当前页面的URL。

获取当前页面的URL

JavaScript中，我们可以使用window.location对象来获取当前页面的URL。window.location包含了浏览器当前加载的Web页面的URL、内部属性以及方法。

方法1：获取整个URL

要获取整个URL，可以使用window.location.href属性。以下是一个示例：

// 获取当前页面的URL
var currentUrl = window.location.href;

console.log(currentUrl); // 输出整个URL

方法2：获取URL的组成部分

window.location对象还包含了获取URL各个部分的属性：

  • window.location.protocol：返回协议名（如：http:或https:）。
  • window.location.host：返回主机名和端口号（如：www.example.com:8080）。
  • window.location.pathname：返回URL路径名。
  • window.location.search：返回查询字符串。
  • window.location.hash：返回锚点。

以下是一个示例，展示如何获取URL的各个部分：

// 获取URL的组成部分
var protocol = window.location.protocol; // 协议
var host = window.location.host; // 主机名和端口号
var pathname = window.location.pathname; // 路径名
var search = window.location.search; // 查询字符串
var hash = window.location.hash; // 锚点

console.log(protocol); // 输出协议名
console.log(host); // 输出主机名和端口号
console.log(pathname); // 输出路径名
console.log(search); // 输出查询字符串
console.log(hash); // 输出锚点

调用URL

在获取到URL之后，你可以根据需要对其进行一些操作，如：

1. 重定向到其他页面

使用window.location.href属性，你可以将用户重定向到另一个页面：

// 重定向到https://www.example.com
window.location.href = 'https://www.example.com';

2. 替换当前URL

如果你想替换当前URL，但不改变浏览器的历史记录，可以使用window.location.replace方法：

// 替换当前URL为https://www.example.com
window.location.replace('https://www.example.com');

3. 添加查询参数

你可以通过修改window.location.search属性来添加查询参数：

// 在当前URL的查询字符串中添加参数
window.location.search += '?key=value';

总之，通过window.location对象，你可以轻松地获取和调用当前页面的URL，并进行相应的操作。

-- 展开阅读全文 --