Question

我正在使用Fullcalendar v4，并试图将浏览器的前进/后退按钮连接到FC导航中。单击月份显示中的prev FC按钮后尝试使用浏览器按钮时遇到问题。

我尝试创建一个小提琴并使用Codepen，但我认为这些站点使用的包装器会干扰浏览器按钮事件的某些方面。我在HERE

处设置了一个经过修剪的样本

预期行为的示例是：

访问上面的链接；单击Go to calendar链接（进行测试，我需要一个启动页面来测试真实日历“主页”页面上的后退按钮操作）。
在日历工具栏的右上方，依次单击月和日按钮。
使用浏览器的后退/前进按钮在视图之间移动。

错误行为的示例：

进入月份视图。查找日历工具栏左侧的顶部，然后单击“ <” prev按钮。这样会将显示后移一个月。
尝试使用浏览器的“后退”按钮返回到初始月份视图，什么也没有发生。

我正在通过window.history.state管理日历状态。在我看来，首次访问页面时，window.history.state为空。初始化并渲染Fullcalendar之后，发生的第一件事就是渲染初始视图并调用datesRender。

我检查window.history.state是否为空，如果是，则使用window.history.replaceState设置默认视图状态。然后，我可以使用replaceState或pushState添加或更新状态信息。

    'datesRender': function (info) {
        if (window.history.state === null) {
            //
            // seems like when a page is first visited the history
            // for that page has a null state.  Add a default state.
            const tempState = {
                'view': info.view.type,
                'range': {
                    'start': moment(info.view.activeStart)
                        .local().format(dateFormatHuman),
                    'end': moment(info.view.activeEnd)
                        .local().format(dateFormatHuman)
                },
                'url': window.location.href,
                'comment': "INIT"
            };

            window.history.replaceState(
                tempState,
                "INIT",
                window.location.href
            );
        } else {
            //
            // if state.comment = POP then we are here after a
            // BACK button press.  Change the comment to "dateRender".
            if (window.history.state.comment === "POP") {
                const tempState = window.history.state;
                tempState.comment = "datesRender";

                window.history.replaceState(
                    tempState,
                    "From pop",
                    window.location.href
                );
            } else {
                //
                // there is current state and we need to change views.
                // add new state for the new view
                const state = {
                    'view': info.view.type,
                    'range': {
                        'start': moment(info.view.activeStart)
                            .local().format(dateFormatHuman),
                        'end': moment(info.view.activeEnd)
                            .local().format(dateFormatHuman)
                    },
                    'url': window.location.href,
                    'comment': "datesRender"
                };

                window.history.pushState(
                    state,
                    "datesRender",
                    window.location.href
                );
            }
        }
    },

按下浏览器的前进/后退按钮会触发window.onpopstate事件。运行处理程序时，“当前” window.history.state是浏览器按钮POP之后的状态。我更新状态注释以将其标记为浏览器按钮事件，然后调用Fullcalendar changeView方法来更新视图。

    function handleStatePopEvent(event) {
        try {
            const tempState = window.history.state;
            tempState.comment = "POP";

            window.history.replaceState(
                tempState,
                tempState.comment,
                tempState.url
            );

            calendar.changeView(
                window.history.state.view,
                window.history.state.range
            );
        } catch (e) {
            throw `handleStatePopEvent: ${e.message}`;
        }
    }

问题似乎是在Fullcalendar prev按钮上单击后，FC内部状态发生了某些变化-尽管我无法证明这一点。 window.history.state中的datesRender已正确更改。按下浏览器的后退按钮时，会触发window.onpopstate事件，并且视图和日期范围正确，可以返回到上个月的视图，但是changeView调用不会呈现任何内容。

在这种情况下，我已经使用了浏览器的Developer Tools调试器，并逐步完成了changeView。除了在某个时刻出现一个标志似乎在说“我是否需要渲染任何东西”之外，没有什么戏剧性的跳动出现在我身上。设置为false。

我做错什么了吗？

Fullcalendar v4：上一步按钮和浏览器后退按钮集成失败

0 个答案: