原生js如何动态跳转页面示例
时间: 2023-04-04 13:00:31 浏览: 61
可以使用以下代码实现原生js动态跳转页面:
window.location.href = "http://www.example.com";
其中,http://www.example.com 是你要跳转的页面的URL地址。
相关问题
js原生路由跳转 实现路由跳转返回 页面不刷新 实现代码
如果你想实现路由跳转返回时不刷新页面,可以使用 HTML5 中的 `history.pushState()` 和 `history.replaceState()` 方法来修改浏览器的历史记录,而不会引起页面的刷新。
以下是一个示例代码:
```javascript
// 跳转到指定路由
function navigateTo(route) {
window.history.pushState(null, null, route);
}
// 返回上一个页面
function navigateBack() {
window.history.back();
}
```
使用示例:
```javascript
// 跳转到新页面
navigateTo('/new-page');
// 返回上一个页面
navigateBack();
```
这样在调用 `navigateBack()` 返回上一个页面时,浏览器的历史记录将被更新,但页面不会刷新。
需要注意的是,这种方式只能在支持 HTML5 的浏览器中使用,并且需要在服务器端配置,确保对所有路由进行正确的处理。如果需要更复杂的路由管理功能,建议使用现有的路由库或框架。
原生js登陆成功后跳转代码
以下是一个基本的原生 JavaScript 登录成功后跳转的代码示例:
```javascript
// 获取登录表单元素
const loginForm = document.getElementById('login-form');
// 监听表单提交事件
loginForm.addEventListener('submit', function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 获取表单中的用户名和密码
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 发送登录请求
// ...
// 登录成功后跳转到首页
window.location.href = 'https://example.com/home';
});
```
在这个示例中,我们首先获取了登录表单元素,并添加了一个事件监听器来监听表单提交事件。在事件处理程序中,我们获取了表单中的用户名和密码,并发送登录请求。如果登录成功,我们使用 `window.location.href` 属性将页面重定向到首页。
需要注意的是,这只是一个简单的示例,实际情况可能会更复杂。例如,您可能需要在登录成功后将用户信息存储在本地存储或会话存储中,以便在其他页面中使用。