window.location.href 接收参数
时间: 2023-10-13 13:25:02 浏览: 158
Window.location.href 可以接收参数作为查询字符串(query string),这些参数可以通过在 URL 中添加问号和键值对来传递。例如:
```
http://example.com/?name=John&age=30
```
在此 URL 中,`name` 和 `age` 是参数名,它们的值分别为 `John` 和 `30`。可以使用 JavaScript 来获取这些参数的值,如下所示:
```javascript
// 获取 URL 中的参数
const params = new URLSearchParams(window.location.search);
const name = params.get('name');
const age = params.get('age');
console.log(name); // 输出 "John"
console.log(age); // 输出 "30"
```
在此示例中,`window.location.search` 返回查询字符串 `?name=John&age=30`,然后使用 `URLSearchParams` 对象将其解析为键值对集合。使用 `get` 方法来获取每个参数的值。
相关问题
通过页面切换传参后window.location.href如何接收一个对象
可以使用 URLSearchParams API 来解析 URL 中的查询参数,然后将它们转换为一个对象。例如,如果你有以下 URL:
```
http://example.com?foo=1&bar=2&baz=3
```
你可以将它解析为一个对象:
```javascript
const params = new URLSearchParams(window.location.search);
const obj = Object.fromEntries(params.entries());
console.log(obj); // { foo: "1", bar: "2", baz: "3" }
```
这里,`URLSearchParams` 构造函数接收 `window.location.search`,它包含了查询参数。调用 `entries()` 方法可以得到一个迭代器,它返回一个由 `[key, value]` 对组成的数组。最后,使用 `Object.fromEntries()` 将数组转换为对象。
如果你想要传递一个对象作为查询参数,可以使用 `JSON.stringify()` 将它转换为字符串,并在 URL 中进行传递。例如:
```javascript
const obj = { foo: 1, bar: 2, baz: 3 };
const str = encodeURIComponent(JSON.stringify(obj));
window.location.href = `http://example.com?data=${str}`;
```
这里,`JSON.stringify()` 将对象转换为字符串,然后使用 `encodeURIComponent()` 对它进行编码,以便能够在 URL 中进行传递。最后,通过 `window.location.href` 将 URL 设置为包含查询参数的字符串。在接收端,可以使用上面的方法解析查询参数并将它转换回对象。
通过页面跳转传对象如何通过window.location.href接收一个对象
在页面跳转中,我们可以通过将对象序列化为字符串,然后将其作为 URL 参数传递给下一个页面,下一个页面再将其反序列化为对象。具体实现步骤如下:
1. 在页面 A 中将对象序列化为字符串,然后将其作为 URL 参数传递给页面 B:
```
var obj = {name: 'Tom', age: 18};
var objStr = JSON.stringify(obj);
window.location.href = 'pageB.html?data=' + encodeURIComponent(objStr);
```
2. 在页面 B 中通过解析 URL 参数获取序列化的字符串,然后将其反序列化为对象:
```
var objStr = decodeURIComponent(window.location.search.substring(1).split('=')[1]);
var obj = JSON.parse(objStr);
console.log(obj); // {name: 'Tom', age: 18}
```
需要注意的是,这种方式只适用于传递较小的对象,因为 URL 的长度是有限制的,如果传递的对象较大,会导致 URL 过长,可能会被浏览器拦截。对于较大的对象,建议使用其他方式进行传递,如使用 sessionStorage 或 localStorage。
阅读全文