javascript - 创建 javascript 小部件时如何管理浏览器 "back"和 "forward"按钮

Question

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

我看到了两个解决方案
1) 在 javascript 对象中跟踪历史记录，然后尝试检测“后退”和“前进”点击
2) 在 url 散列中跟踪当前状态。 (如 www.xxx.com/events#timely=my-fantastic-event )

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

如此真实的案例场景。我在网站 www.fantastic-events.com 上有我的事件。我使用 javacascript 小部件将日历嵌入到 www.event-listings.com/events。当用户点击事件的详细信息时，我可能会推送我想要的状态(www.event-listings.com/event/my-fantastic-event)并使用 History.js 来捕捉状态变化并加载正确的事件，但这会创建一个之后无法使用的 url。我的意思是，如果用户将 www.event-listings.com/event/my-fantastic-event 加入书签并稍后访问它，它将无法工作，因为我的 javascript 小部件不会被加载。

有什么建议/考虑吗？

Answer 1

有两种主要方法可以实现您的目标。
其中之一是您提到的散列方法。如果您需要支持较旧的浏览器(IE <= 9)，那就是要走的路。如果您决定使用此方法，您的 friend 就是 hashchange event .哈希模式依赖于此事件来触发功能。以最天真的方式，它看起来像:

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

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

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

对于您对“不存在的页面”问题的担忧 - 一种可能的解决方案是为您的状态使用查询参数，而不是不存在的 URL:

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

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

可以看看this nice MDN article以便更好地引用。