如何在创建javascript小部件时管理浏览器“后退”和“前进”按钮
我创建了一个Javascript小部件，允许用户在外部网站上嵌入日历。 现在我没有以任何方式处理浏览器后退/前进按钮，这意味着如果他们点击一个事件，它将通过ajax加载，但如果他们点击“返回”，他们将被带到上一个网站。
我看到了两个解决方案
1）跟踪javascript对象中的历史记录，然后尝试检测“后退”和“前进”点击
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。 我的意思是，如果用户书签www.event-listings.com/event/my-fantastic-event并稍后查看它将无法正常工作，因为我的javascript小部件将无法加载。
有什么建议/考虑吗？
有两种主要方法可以实现您的目标。
其中之一就是你提到的哈希方法。 如果你需要支持旧的浏览器（IE <= 9），那就是你要走的路。 如果您决定使用此方法，那么您的朋友就是hashchange事件 。 散列模式依赖于此事件以触发function。 以最天真的方式，它看起来像：
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文章以获得更好的参考。