如何管理浏览器“;背面“;以及“;向前“;按钮

How to manage browser "back" and "forward" buttons when creating a javascript widget

本文关键字：背面 向前 按钮 以及 浏览器 何管理 管理      更新时间：2023-09-26

我创建了一个Javascript小部件，允许用户在外部网站上嵌入日历。现在我没有以任何方式处理浏览器的后退/前进按钮，这意味着如果他们点击一个事件，它会通过ajax加载，但如果他们点击"后退"，他们会被带到上一个网站。

我看到了两种解决方案
1） 跟踪javascript对象中的历史记录，然后尝试检测"后退"answers"前进"的单击
2） 在url散列中跟踪当前状态。（如www.xxx.com/events#timely=my-fantastic-event）

解决方案2也允许对事件进行书签，尽管我认为这仍然很慢，因为它首先需要加载页面，然后加载事件（我的意思是，它首先加载www.xxx.com/events，然后检测哈希并加载事件）

所以真实的情况。我在www.fantastic-events.com网站上有我的活动。我使用javcascript小部件在w ww.event-listings.com/events上嵌入日历。当用户点击事件的详细信息时，我可能会推送我想要的状态（www.event-listings.com/event/my-fantastic-event），并使用History.js来捕捉steate更改并加载正确的事件，但这会创建一个url，之后该url将不可用。我的意思是，如果用户为www.event-listings.com/event/my-fantastic-event添加书签并稍后对其进行可视化编辑，它将不起作用，因为我的javascript小部件将不会加载。

有什么建议/考虑吗？

实现目标主要有两种方法
其中之一，就是您提到的散列方法。如果你需要支持旧的浏览器（IE<=9），那就是方法。如果你决定使用这种方法，你的朋友就是hashchange事件。哈希模式依赖于此事件来触发功能。以其最天真的方式，它看起来像：

window.addEventListener('hashchange', function (e) {
    var hash = window.location.hash;
    if (hash === 'event-1') {
        // ...
    }
    else if (...) {
        // ...
    }
});

您的另一个选择是使用History API，特别是pushState方法和popstate事件。需要注意的是，pushState方法不会创建HTTP请求。此外，如果用户更改当前历史记录条目（使用后退/前进按钮），浏览器将不会重新加载，而是会触发一个popstate事件，您可以收听。如果用户导航到不是使用pushState或replaceState创建的历史记录条目，浏览器会按预期加载资源（你不会损害用户的体验——如果她想离开网站，她会成功的）。

请注意，使用hashchange方法可能会与使用该方法的其他库发生冲突，并且由于大多数流行的框架（ember、angular等）出于浏览器兼容性的原因使用该方法，因此有点风险。

对于您对"不存在页面"问题的担忧-一个可能的解决方案是使用查询参数来表示您的状态，而不是不存在的URL:

window.history.pushState({ event: 'event-id' }, "Event Title", "?event=event-id");

然后，您可以在页面加载时解析查询参数，并使用它们的值将组件初始化为所需状态。

你可以看看这篇很好的MDN文章，以获得更好的参考。

相关文章：