使用Javascript导航，但更改URL

Posted 2021-04-06

我想使用javascript在页面内导航动画，但也要更改URL，以便用户可以单击“返回”返回上一个“页面”。

我不知道如何处理这个问题。我是否将我正在导航的内容放在新的html页面上，或者放在同一页面上？

到目前为止我尝试过的：

<a href="/someOtherPage">Some Other Page</a>

这将完全重新加载到someOtherPage，并且不允许动画。

<a href="#" onclick="animateToOtherSection()">Some Other Page</a>
<script>
  function animateToOtherSection() {
    //things like fade in/out or scroll
  }
</script>

如果我导航到的内容存在于此页面中，这是可行的，这是可以的，但URL不会被更改（除了额外的＃）。

如果我尝试在Javascript中更改window.href，整个页面将重新加载，这是不希望的。

这个问题的灵感来自一些网站like this。单击See our projects按钮时，虽然它作为锚元素，但页面不会重新加载，但会执行淡出/淡出并且上面的导航栏始终保持不变。如果我在浏览器中单击“后退”按钮，另一个动画会将我带回启动画面。

注意：这不是一个选项：

<a href="#section">Some Other Page</a>

我不想只是滚动到一个元素，而是操纵和显示/隐藏屏幕上的很多元素。

在此先感谢您的答案！

答案

DOM窗口对象通过历史对象提供对浏览器历史的访问。它公开了有用的方法和属性，使您可以在用户的​​历史记录中来回移动，以及 - 从HTML5开始 - 操作历史堆栈的内容。

https://developer.mozilla.org/en-US/docs/Web/API/History_API

从服务器加载数据并将返回的HTML放入匹配的元素中。

http://api.jquery.com/load/

你可以在这里轻松实例：

HTML：

<button id="changeUrl">See our projects</button>

JavaScript的：

$('#changeUrl').click(function () {
    history.pushState({}, 'Title', '/Url/Test');

    $(document).load('/url html');
});

您还可以添加动画，例如：

$('#changeUrl').click(function () {
    $('body').fadeOut();

    history.pushState({}, 'Title', '/Url/Test');

    $(document).load('/url html', function () {
        $('body').fadeIn();            
    });
});

另一答案

您还可以在“卸载”当前页面时添加JavaScript“fadeout”动画，并在下一页加载开始时执行“fadein”动画。

如果您预取大部分内容，转换将会顺利进行。

要在单击链接时避免页面加载，请将onclick事件附加到链接，并按照此问题中的说明完成JavaScript的e.preventDefault();回调：来自Mozilla Dev Network的How to stop default link click behavior with jQuery：https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

如果事件可以取消，则取消该事件，而不停止事件的进一步传播。

---

关于链接预取：https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ

<link rel="prefetch" href="/images/big.jpeg">

甚至真的用<img加载style=display:none;来隐藏它们......