### 页面跳转JS获取传递的参数
在Web开发过程中，页面间的跳转及参数传递是极为常见的需求之一。本文将详细介绍几种通过JavaScript实现页面跳转并获取传递参数的方法。
#### 方法一：使用`window.location.href`
```javascript
// 通过修改当前窗口的location.href属性来实现页面跳转，并附带参数
window.location.href = "Default2.aspx?id=111";
```
此方法适用于简单的页面跳转场景，参数通过URL的方式传递。其中，“id”为参数名，“111”为参数值。这种方式简单直观，但在实际项目中可能需要处理更复杂的参数传递情况。
#### 方法二：通过`location.search`获取URL中的查询字符串
```javascript
// 获取URL中的查询字符串（不包括问号）
var userid = location.search.substring(1, location.search.length);
```
- `location.search`返回当前文档URL中的查询字符串部分，即“?”后面的部分。
- `substring(1, location.search.length)`用于截取字符串，去掉最前面的“?”。
获取到查询字符串后，可以通过正则表达式或字符串操作进一步解析出具体的参数名和参数值。
#### 方法三：使用`window.open`打开新窗口并传递参数
```javascript
function openScript(url, width, height) {
var Win = window.open(url, "openScript", 'width=' + width + ',height=' + height + ',resizable=1,scrollbars=yes,menubar=no,status=yes');
}
// 调用函数打开新窗口
function openem() {
openScript('UPLOAD.aspx', 450, 300);
}
```
- `window.open`方法可以打开一个新的浏览器窗口或标签页，并可指定其宽度、高度等属性。
- 参数通过URL直接传递。
这种方法适用于需要用户交互的新窗口或弹窗场景。
#### 方法四：表单提交与参数传递
```html
<input id="Button1" type="button" value="上传图片" class="btn1_mouseover" onClick='window.opener.addNEWS.img.value = Text1.value; window.opener.addNEWS.img1.src = Text1.value; self.close()' />
<form id="addNEWS" runat="server" name="addNEWS">
</form>
```
- 使用HTML表单提交数据时，可通过JavaScript设置表单元素的值来传递参数。
- 表单提交后，通常会触发服务器端逻辑进行处理。
#### 方法五：解析URL参数
```javascript
// 解析URL中的参数并存储到数组中
var URLParams = new Array();
var aParams = document.location.search.substr(1).split('&');
for (var i = 0; i < aParams.length; i++) {
var aParam = aParams[i].split('=');
URLParams[aParam[0].toUpperCase()] = aParam[1];
}
// 使用参数
var n = URLParams["N"];
var m = URLParams["M"];
```
- 首先获取URL中的查询字符串，并按“&”分割成多个键值对。
- 然后对每个键值对进行分割，分别提取参数名和参数值。
- 最后将所有参数存储到一个对象中，便于后续访问。
这种处理方式更加灵活，适合处理复杂的参数传递需求。
### 总结
通过上述方法，我们可以有效地实现页面间的跳转以及参数的传递和获取。根据不同的应用场景选择合适的技术方案，可以使代码更加简洁高效。在实际开发过程中，还需要注意安全性问题，如对用户输入的数据进行验证和过滤，避免安全漏洞。
- 1
- 2
- 3
前往页