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

小编典典

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

ajax

我创建了一个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来捕获状态更改并加载正确的事件，但这将创建一个以后无法使用的url。我的意思是，如果www.event- listings.com/event/my-fantastic-event以后用户添加书签
并对其进行访问，它将无法正常工作，因为无法加载我的JavaScript小部件。

有什么建议/考虑吗？

阅读 228

2020-07-26

共1个答案

小编典典

有两种主要方法可用来实现您所追求的目标。
其中之一是您提到的哈希方法。如果您需要支持较旧的浏览器（IE <=
9），这就是方法。如果您决定使用此方法，那么您的朋友就是hashchangeevent。哈希模式依靠此事件来触发功能。以最幼稚的方式，它看起来像：

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

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

请注意，使用该hashchange方法可能会与使用该方法的其他库发生冲突，并且由于大多数流行的框架（琥珀色，有角度的等等）出于浏览器兼容性原因而使用该方法，因此存在一定的风险。

对于“不存在的页面”问题，您可能会想到的解决方案是针对您的状态而不是不存在的URL使用查询参数：

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

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

您可以看一下这篇不错的MDN文章，以获取更好的参考。

2020-07-26