Question

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

我看到两个解决方案 1）跟踪javascript对象中的历史记录，然后尝试检测＆＃34;返回＆＃34;和＆＃34;前进＆＃34;点击
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小部件无法加载而无法正常工作。

有任何建议/考虑吗？

Answer 1

有两种主要方法可以实现您的目标其中之一就是你提到的哈希方法。如果你需要支持旧的浏览器（IE <= 9），那就是你要走的路。如果您决定使用此方法，那么您的朋友就是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以获得更好的参考。

如何在创建javascript小部件时管理浏览器“后退”和“前进”按钮

1 个答案: