HTML
页面的
跳转方式有多种，以下为你详细介绍：
### HTML标签
方式
- **`<meta>`标签**：可实现
页面的自动
跳转，通过设置`http-equiv="refresh"`和`content`属性，指定
跳转时间和目标URL。示例
代码如下：
```html
<!-- 5秒后自动
跳转到Example网站 -->
<meta http-equiv="refresh" content="5; url=http://example.com">
```
- **`<a>`标签**：用户点击超链接后进行
页面跳转，使用`href`属性指定目标URL。示例
代码如下：
```html
<!-- 用户点击后
跳转 -->
<a href="http://example.com">点击
跳转到Example网站</a>
```
###
JavaScript方式
- **`window.location.href`**：直接修改当前窗口的URL并加载新
页面，会在浏览器历史记录中生成新记录。示例
代码如下：
```
javascript
// 立即
跳转到 Example 网站
window.location.href = "http://example.com";
```
- **`window.location.replace`**：替换当前历史记录并
跳转，不会在浏览器历史记录中生成新的记录。示例
代码如下：
```
javascript
// 替换当前
页面并
跳转到 Example 网站
window.location.replace("http://example.com");
```
- **`window.history.back()`和`window.history.go()`**：`window.history.back()`可后退到上一个
页面，相当于浏览器的后退按钮；`window.history.go()`可根据参数指定
跳转的步数，负数表示后退，正数表示前进。示例
代码如下：
```
javascript
// 后退到上一个
页面
window.history.back();
// 后退一步，等同于 window.history.back()
window.history.go(-1);
// 前进一步
window.history.go(1);
```
- **`window.location.reload()`**：用于刷新当前
页面，无参数时默认从缓存中加载，传入`true`参数可强制从服务器重新加载。示例
代码如下：
```
javascript
// 从缓存中刷新当前
页面
window.location.reload();
// 强制从服务器重新加载当前
页面
window.location.reload(true);
```
### AJAX请求后处理
AJAX请求后，可根据服务器返回的结果进行
页面跳转。例如，在AJAX请求成功的回调函数中使用`window.location.href`进行
跳转：
```
javascript
$.ajax({
url: 'your_api_url',
method: 'GET',
success: function(response) {
if (response.status === 'success') {
window.location.href = "http://example.com";
}
}
});
```
### 小程序中
页面跳转（以微信小程序为例）
- **`wx.navigateTo`**：保留当前
页面，
跳转到应用内的某个
页面，使用该方法
跳转后可通过返回按钮回到原
页面。示例
代码如下：
```
javascript
wx.navigateTo({
url: '/pages/newPage/newPage'
});
```
- **`wx.redirectTo`**：关闭当前
页面，
跳转到应用内的某个
页面，使用该方法
跳转后无法通过返回按钮回到原
页面。示例
代码如下：
```
javascript
wx.redirectTo({
url: '/pages/newPage/newPage'
});
```
### H5与Native交互
方式
在H5
页面中，可通过特定
方式“告诉”Native，由Native执行打开新WebView，并在新WebView中加载
页面。这种
方式下，
跳转的本质是H5与Native进行交互，由Native完成
页面的打开操作 [^2]。
###
页面跳转传递参数
页面跳转时可传递参数，在传参
页面将参数序列化后添加到URL中，在接受参数
页面进行解析。示例
代码如下：
```
javascript
// 传参
页面
let a = { key: 'value' };
// 对参数进行序列化
let astr =
JSON.stringify(a);
let url = 'https://learn-anything.cn/search?input=' + astr;
window.open(url);
// 接受参数
页面
// window.location 存储了本
页面相关所有数据
let query = window.location.search;
// 参数解析
方式
const urlTemp = require('url');
let parsedUrl = urlTemp.parse(window.location.href, true);
let para = parsedUrl.query.input;
// 反序列化得到参数
let a =
JSON.parse(para);
```
### 新打开WebView
方式
用户点击
页面中的元素进行
跳转时，可采用新打开WebView的
方式。这种
方式下，
跳转的本质是H5“告诉”Native，由Native执行打开新WebView，并在新WebView中加载
页面 [^2]。
本文介绍了网页跳转的两种主要方式：通过location对象及其方法实现的跳转。详细解释了使用location.href、location.assign与location.replace的区别，特别是对于浏览器历史记录的影响。
扫一扫
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
