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

I have created a Javascript widget that allows user to embed a calendar on external websites. Right now i'm not handling browser back/forward button in any way, that means that if they click on an event, it is loaded through ajax, but then if they click "back" they are taken to the previous website.

我看到两个方案来解决这个 1）跟踪历史的一个JavaScript对象，然后尝试检测后退和前进点击 2）跟踪的当前状态，在URL散列。 （如 www.xxx.com/events#timely=my-fantastic-event ）

I see two solutions for this 1) keep track of history in a javascript object and then try to detect "back" and "forward" clicks 2) keep track of current state in a url hash. ( like www.xxx.com/events#timely=my-fantastic-event )

解决方案2号也将允许事件的书签，但我认为这将是一个仍然很慢，因为它首先需要加载网页，然后加载事件（我的意思是先加载它www.xxx.com/events和然后在检测到的散列和负载的情况下）

Solution number 2 would allow also bookmarking of events, although i think it would be a still slow as it first would need to load the page and then load the event ( i mean first it load www.xxx.com/events and then it detects the hash and loads the event )

那么真实的情况。我的网站 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 和visdits它后，它不会工作，因为我的JavaScript小部件不会被加载。

So real case scenario. I have my events on the website www.fantastic-events.com. I use the javcascript widgets to embed the calendar on www.event-listings.com/events. When the user clicks on the detail of an event, i could probably push the state i want ( www.event-listings.com/event/my-fantastic-event ) and use History.js to to catch the steate change and load the correct event but that would create an url which is not usable afterwards. I mean that if a user bookmarks www.event-listings.com/event/my-fantastic-event and visdits it later it won't work because my javascript widget would not be loaded.

任何建议/考虑？

推荐答案

有两种主要的方法来实现你所追求的。照片 其中之一，就是你刚才提到的散列法。如果你需要支持旧的浏览器（IE＆LT; = 9），这是要走的路。如果你决定使用这种方法，你的朋友是 hashchange 事件。散列模式依赖于这个事件才能触发功能。在其最幼稚的方式，它看起来像：

There are two main methods for achieving what you are after. One of them, is the hash method you've mentioned. If you need to support older browsers (IE <= 9), that's the way to go. If you decide to use this method, your friend is the hashchange event. The hash pattern relies on this event in order to trigger functionality. In its most naive way it will look something like:

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

您的另一种选择，就是使用历史API ​​ ，特别是 - 对 pushState 方法，在旁边的 popstate 事件。应当指出的是，在 pushState 方法不创建一个HTTP请求。此外，如果用户更改当前的历史条目（与后退/前进按钮），浏览器将不会重新加载，而是会引发 popstate 的事件，你可以听。如果用户是否导航到已不使用创建历史条目 pushState 或 replaceState 时，浏览器将加载资源如预期（你会不会损害用户的体验 - 如果她要离开该网站，她会成功）。

Your other option, is to use the History API, specifically - the pushState method, alongside the popstate event. It should be noted that the pushState method does not create an HTTP request. Also, if the user changes the current history entry (with the back/forward buttons), the browser will not reload, but instead, will trigger a popstate event, that you can listen to. If the user if navigating to a history entry that was not created using pushState or replaceState, the browser will load the resource as expected (you won't harm the user's experience - if she wants to get out of the website, she'll succeed).

注意使用 hashchange 方法可能与使用该方法的其他库冲突，因为大多数流行的框架（烬，角等）使用方法浏览器的兼容性的原因，它是有点危险的。

Note that using the hashchange method might conflict with other libraries that use that method, and since most popular frameworks (ember, angular, etc..) use that method for browser compatibility reasons, it is kinda risky.

有关您关于不存在的页面问题的关注 - 一个可能的解决方案是使用查询参数为你的国家，而不是不存在的网址：

For your concern regarding the 'non existing page' problem - A possible solution is to use query params for your state, and not non-existing URLs:

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

您可以再分析的页面加载的查询参数，并使用以自己的价值观来初始化您的组件在理想状态。

You can then parse the query-parameters on page-load, and use their values in order to initialize your component in the desired state.

您可以看看这个漂亮的MDN文章，获取更好的参考。

You can take a look at this nice MDN article for better reference.