使用window.location.href连续跳页并且使用对象传递参数
时间: 2023-07-04 20:26:13 浏览: 96
可以通过以下步骤实现:
1. 在第一个页面中定义一个 JavaScript 对象并将要传递的参数作为其属性,比如:
```
var params = {
name: "John",
age: 30,
city: "New York"
};
```
2. 在第一个页面中使用 `encodeURIComponent()` 函数将对象转换为 URL 编码字符串,然后将其作为查询字符串附加到目标页面的 URL 中,比如:
```
var url = "page2.html?params=" + encodeURIComponent(JSON.stringify(params));
window.location.href = url;
```
3. 在第二个页面中使用 `decodeURIComponent()` 函数解码查询字符串,并使用 `JSON.parse()` 函数将其转换为 JavaScript 对象,比如:
```
var paramsStr = decodeURIComponent(window.location.search.substr(1)).split('=')[1];
var params = JSON.parse(paramsStr);
```
现在,你可以在第二个页面中使用 `params` 对象中的属性了。你可以使用类似的方式在第二个页面中将参数传递给第三个页面,以此类推。
相关问题
window.location.href传递参数
可以使用window.location.href进行页面跳转并传递参数。例如,可以使用以下代码将参数传递给新页面:
window.location.href = "./punch/clock_frm.html?modFlag=" + modFlag + "&role=" + role;
在新页面接收参数并将其转换为可用的JSON格式,可以使用以下方法:
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") ! -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
}
console.log(theRequest); //此时的theRequest就是我们需要的参数
}
如果在传递参数时遇到中文乱码问题,可以使用encodeURI对中文进行编码,如下所示:
window.location.href = 'aaa.html?Unit=' + encodeURI(encodeURI(中文内容));
在接收页面接收参数时,可以使用decodeURI解码回来,如下所示:
var param = decodeURI(window.location.href);<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [转载--window.location.href传参/传值汇总](https://blog.csdn.net/weixin_47382065/article/details/120264692)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [window.open 以post方式传递参数示例代码](https://download.csdn.net/download/weixin_38655011/13621948)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
window.location.href 传递对象
### 使用 `window.location.href` 传递 JavaScript 对象
当需要通过 `window.location.href` 在页面之间传递 JavaScript 对象时,通常的做法是先将对象序列化为字符串形式,最常用的方法是将其转换成 JSON 字符串并作为查询参数附加到目标 URL 上。为了确保这些数据能在 URL 中被正确传输,应当使用 `encodeURIComponent()` 函数来编码对象中的特殊字符。
对于简单的对象可以直接利用 `JSON.stringify()` 方法进行序列化处理:
```javascript
// 创建要传递的对象
let obj = {
name: 'chen',
age: 18,
};
// 将对象转化为 JSON 字符串,并对其进行 URI 编码
const encodedObj = encodeURIComponent(JSON.stringify(obj));
// 构建新的 URL 并执行跳转
window.location.href = './targetPage.html?objData=' + encodedObj;
```
接收端可以通过解析 URL 参数获取该对象,并再次调用 `JSON.parse()` 来反序列化回原始对象结构[^1]。
需要注意的是,在某些情况下如果对象非常大,则可能会超出浏览器支持的最大 URL 长度限制(不同浏览器有不同的规定),这时建议考虑其他方式如存储于 sessionStorage 或 localStorage 等本地储存机制中再携带 key 进行跨页共享[^2]。
阅读全文