HTML+JS实现页面跳转

最新推荐文章于 2026-04-29 13:22:03 发布

原创最新推荐文章于 2026-04-29 13:22:03 发布 · 1w 阅读

54 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #js #html

收录于

HTML 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现页面跳转的方法。通过window.location.assign(url)函数，可实现页面跳转并保留历史记录，便于用户使用后退功能。文章提供了完整的代码示例，并对比了window.location.href=url的不同。

HTML+JS实现页面跳转

代码
关键代码解释
结果展示

代码

话不多说，先上代码，该代码极其简单，可在我的GitHub中下载，链接在此

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面跳转</title>
    <script>
        function pageJump() {
            window.location.assign('http://www.baidu.com');
        }
    </script>
</head>
<body>
    <input type="button" value="页面跳转" onclick="pageJump()" />
</body>
</html>

关键代码解释

window.location.assign(url)

该方法可以加载一个新的文档。

其中window.location.assign(url)和window.location.href=url实现功能是一样的，都是跳转到网址，只是用法稍微不同。最大的不同是，window.location.assign(url)会添加记录到浏览历史，点击后退可以返回之前页面，而window.location.href=url则不行。