html5引入js跳转怎么弄

在网页里做跳转，前端能直接操作的主要是 window.location 对象。它代表当前页面的地址，一旦改变，浏览器就会按照新的值去加载页面。日常开发中最常用的方式有两种：给 location.href 赋值，或者调用 location.replace()。两者最终都能到达新页面，但行为不太一样。



location.href 是最常见的选择，通常放在一个函数里，由按钮、链接或者定时器触发。代码可以直接写在 HTML 的 <script> 标签中，也可以放到独立的 .js 文件里再引入。一个简单的内联写法大致是这样：

<button onclick="goToNewPage()">点击跳转</button>

<script>

function goToNewPage() {

  window.location.href = 'https://www.example.com';

}

</script>

如果页面里的脚本比较多，单独建一个 script.js 文件会更方便维护。把跳转函数放进去，然后在 HTML 底部通过 <script src="script.js"></script> 加载，按钮照样调用同名函数就行。这样 HTML 结构不会被大段脚本塞满，修改起来也更容易定位。

这个写法有一个明显特点：当前页面会留在浏览器历史记录里。也就是说，用户跳到新页面后，点击后退键还能回到原来的页面。对于普通的站内跳转、外部链接跳转，用这个方法基本就够了。

另一种方式是 window.location.replace()。它同样能够完成跳转，但和 href 赋值最大的区别在于，它不会保留当前页在历史记录里的位置。跳转完成后，用户再按后退按钮不会回到刚才这个页面。

<script>

function goToNewPageReplace() {

  window.location.replace('https://www.example.com');

}

</script>

这个特性在一些场景里很实用。比如登录成功后跳转到首页、提交表单后进入结果页、支付完成页等。这些情况下用户已经完成操作，返回去反而可能看到过期页面或者造成重复提交，用 replace 会更干净。前端往往需要根据业务状态决定是否让用户回退，这时选择哪种方法就有意义了。

两种方法用起来都不复杂，真正需要注意的是使用时机。前端 JavaScript 跳转一旦 URL 写错，或者目标地址无法访问，用户就会直接看到错误页。另外，前端跳转对搜索引擎的友好度不如服务端重定向。如果只是临时跳转、用户点击跳转或者根据条件动态跳转，用 JavaScript 是合适的；但如果是永久迁移、域名更换、需要 SEO 权重继承的情况，还是应该优先在服务器端返回 301 或 302。

当跳转逻辑开始变复杂，比如要根据用户是否登录、设备类型、活动状态来决定跳到哪个地址，建议把这些判断统一封装在一个函数里，不要在每个 onclick 里重复写地址和条件。一个清晰的前端跳转函数，会让后续维护和测试省很多事。



实际开发中记住一个核心区别就好：普通的、需要用户能返回的跳转用 location.href；不希望用户再回到原页面的，用 location.replace。这样基本能覆盖绝大多数前端跳转需求。