window.location.href 传递参数以及目标页面接收参数的方式

传递参数

在 JavaScript 中，你可以通过修改 window.location.href 来传递参数到另一个页面。通常，这些参数会附加在 URL 的查询字符串部分。查询字符串以问号 (?) 开始，并且参数之间用与号 (&) 分隔。

以下是一个示例，展示如何通过 window.location.href 传递参数：

// 定义目标URL
var baseUrl = "https://example.com/page";

// 定义参数
var param1 = "value1";
var param2 = "value2";

// 构建查询字符串
var queryString = "?param1=" + encodeURIComponent(param1) + "&param2=" + encodeURIComponent(param2);

// 设置window.location.href
window.location.href = baseUrl + queryString;

在这个示例中：

• baseUrl 是目标页面的 URL。
• param1 和 param2 是你想传递的参数。
• encodeURIComponent 用于对参数值进行编码，以确保它们在 URL 中是安全的。
• queryString 是构建的查询字符串。
• 最后，通过设置 window.location.href，浏览器会导航到包含这些参数的新 URL。
• 这样，目标页面 https://example.com/page 将会收到参数 param1=value1 和 param2=value2，完整的 URL 将会是 https://example.com/page?param1=value1&param2=value2。

目标页面接收参数

在目标页面，你可以使用 JavaScript 来解析 URL 中的查询字符串，并提取参数。以下是一个示例，展示如何在目标页面获取传递的参数：

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

// 创建一个 URL 对象
var urlObj = new URL(url);

// 使用 URLSearchParams 对象来解析查询字符串
var params = new URLSearchParams(urlObj.search);

// 获取参数值
var param1 = params.get('param1');
var param2 = params.get('param2');

// 输出参数值
console.log('param1:', param1);
console.log('param2:', param2);

在这个示例中：

• window.location.href 获取当前页面的完整 URL。
• new URL(url) 创建一个 URL 对象，方便解析 URL 的各个部分。
• new URLSearchParams(urlObj.search) 创建一个 URLSearchParams 对象，用于解析查询字符串。
• params.get(‘param1’) 和 params.get(‘param2’) 分别获取查询字符串中的 param1 和 param2 参数值。
• 最后，通过 console.log 输出参数值。
• 假设当前页面的 URL 是 https://example.com/page?param1=value1&param2=value2，上述代码将会输出：

param1: value1
param2: value2

这样，你就可以在目标页面中获取并使用传递的参数了。