一、不在JS中跳转
如果你不想在 JavaScript 中写页面跳转,而是希望使用 HTML 或者其它前端方式来实现页面跳转,下面是一些常见的方法:
1. 使用 标签进行跳转
HTML 中最常见的跳转方式就是使用 标签。它可以让用户点击链接进行页面跳转。
如果你想要跳转到其他页面,可以设置 href 属性为目标页面的 URL。点击链接后,页面会跳转。
示例:
如果你希望跳转到新窗口:
target="_blank" 属性会在新窗口中打开目标页面。
2. 使用
表单的 action 属性指定了提交的目标 URL,method 属性指定了请求的方法(GET 或 POST)。点击提交按钮时,浏览器会跳转到指定的 URL。
3. 使用 标签进行自动跳转
如果你希望页面加载完成后自动跳转到另一个 URL,可以使用 标签。
content="3;url=https://www.example.com" 表示页面将在 3 秒后自动跳转到指定的 URL。你可以根据需要修改时间(单位为秒)。
4. 使用 
如果你希望页面中所有相对链接都指向某个固定的基础 URL,可以使用 
此时,页面中所有相对路径的链接都会基于 https://www.example.com/ 进行解析。
5. 使用
如果你想要在当前页面内跳转并显示另一个页面,而不是完整地跳转到另一个页面,可以使用
这样,目标页面会被加载到
这些方法中, 标签是最常用的页面跳转方式。如果你只需要用户点击链接跳转页面,使用 标签最为简单和直观。其他方式则适用于不同的场景,具体选择哪一种取决于你的需求。
二、在JS中跳转
在 HTML5 中使用 JavaScript 来实现页面跳转是非常简单的。你可以通过以下几种方式来实现:
1. 使用 window.location 实现页面跳转
window.location 是 JavaScript 提供的一个对象,可以用于获取当前页面的 URL 或设置新的 URL 来进行页面跳转。
// 跳转到一个新的页面
window.location.href = 'https://www.example.com';
// 或者使用相对路径跳转
window.location.href = 'anotherpage.html';2. 使用 window.location.assign() 方法
assign() 方法用于加载新的页面,它与直接设置 window.location.href 很相似。不同之处在于 assign() 方法会将当前页面添加到浏览器的历史记录中。
window.location.assign('https://www.example.com');3. 使用 window.location.replace() 方法
replace() 方法也用于跳转页面,但是它不会将当前页面添加到浏览器的历史记录中。使用这种方式跳转后,用户不能通过浏览器的“后退”按钮返回到原来的页面。
window.location.replace('https://www.example.com');4. 使用 window.location.reload() 刷新当前页面
如果你只想刷新当前页面,可以使用 reload() 方法。
window.location.reload();5. 跳转到一个特定的锚点
如果你想跳转到页面中的某个位置,可以使用锚点(#)来实现跳转:
window.location.href = '#section-id'; // 假设页面中有 id="section-id" 的元素6. 使用 location 对象中的其他属性
你还可以使用 window.location 的其他属性,如:
window.location.pathname 获取或设置路径部分
window.location.search 获取或设置查询字符串
window.location.hash 获取或设置哈希部分
例子:跳转到某个页面并附带参数
window.location.href = 'https://www.example.com?param1=value1¶m2=value2';总结
window.location.href 和 window.location.assign() 都用于跳转页面,但前者会直接改变当前页面的 URL,后者则会将跳转添加到浏览器的历史记录中。
window.location.replace() 会跳转并替换掉当前页面,因此无法通过浏览器的“后退”按钮返回。
window.location.reload() 用于刷新当前页面。
你可以根据实际需要选择不同的方式来跳转页面。
三、代码示例
index.html 和 detail.html在同一目录下,实现页面跳转。
Hello World!
const btn = document.getElementById('btn').addEventListener('click', function () {
console.log('成功!');
//window.location.href = 'detail.html' // 跳转
//window.location.assign('detail.html') // 跳转
window.open('detail.html', '_blank') // 跳转+打开新标签页
})