javascript - 如何避免在popstate事件处理程序中调用history.pushState？

Question

假设我们有一个 <p:commandLink action="…" onclick="history.pushState(…)">这对页面的状态进行了重要的更改。 Primefaces 5.1 生成以下 HTML:

<a id="link1" href="#"
    onclick="history.pushState( {currentStateKeyWord: 'state1'},'','state1');
             PrimeFacesGeneratedFunction(stuff);">Click me for state 1</a>
<a id="link2" href="#"
    onclick="history.pushState( {currentStateKeyWord: 'state2'},'','state2');
             PrimeFacesGeneratedFunction(stuff);">Click me for state 2</a>

在 popstate事件处理程序中，我们必须根据 pushState 中作为第一个参数推送的对象来恢复状态。使用 JQuery:

jQuery(document).ready(function(jQuery) {
    jQuery(window).bind('popstate', function(event) {
        if ((event.originalEvent.state!==null)
             && (event.originalEvent.state.currentStateKeyWord!==undefined)) {
            switch (event.originalEvent.state.currentStateKeyWord) {
                case 'state1':
                    jQuery("#link1").click();
                    break;
                case 'state2':
                    jQuery("#link2").click();
                    break;
                 default:
                    console.error("Unknown state");
            }
        }
    }
}

为什么这不起作用:使用jQuery("#link1").click();强制链接完全像用户单击它一样工作，这很好，但不幸的是 popstate事件处理程序不得调用history.pushState (位于 onclick 内)。在 Firefox 中，此代码会破坏前进按钮，这是不可取的。

问题:正确编写对 history.pushState 的调用的最简单方法是什么？ ，以及 popstate事件处理程序，考虑到无论我们做什么，popstate必须触发对 PrimeFacesGeneratedFunction(stuff) 的调用？

谢谢!

Answer 1

昨天我认为解决方案应该在客户端，和往常一样，今天早上我醒来时的想法完全不同。

我原来的 JSF 代码是:

<p:commandLink action="#{associateBean.setState('state1')}" 
       onclick="history.pushState('{currentStateKeyWord: 'state1'}','','state1')"
       update="somePanel"/>

<p:commandLink action="#{associateBean.setState('state2')}" 
       onclick="history.pushState('{currentStateKeyWord: 'state2'}','','state2')"
       update="somePanel"/>

如上所述，问题在于 Primefaces 生成 HTML anchor ( a ) 并使用 onclick调用我自己的属性 onclick代码 ( history.pushState ) 以及与 action 的内容相关的一些其他函数属性(PrimefacesGeneratedFunction('stuff'))。

解决方案不是调整 JavaScript，而是使用 <p:remoteCommand>移动action内容出自commandLink .

新的 JSF 代码是:

<p:remoteCommand name="setState1"
     actionListener="#{associateBean.setState('state1')}"  
     update="somePanel"/>
<p:commandLink onclick="setState1();
     history.pushState('{currentStateKeyWord: 'state1'}','','state1')"/>

<p:remoteCommand name="setState2"
    actionListener="#{associateBean.setState('state2')}"
    update="somePanel"/>
<p:commandLink onclick="setState2();
    history.pushState('{currentStateKeyWord: 'state2'}','','state2')"/>

现在是popstate事件处理程序引用 <p:remoteCommand name>属性而不是调用 click()在原始链接上:

jQuery(document).ready(function(jQuery) {
    jQuery(window).bind('popstate', function(event) {
        if ((event.originalEvent.state!==null)
             && (event.originalEvent.state.currentStateKeyWord!==undefined))     {
            switch (event.originalEvent.state.currentStateKeyWord) {
                case 'state1':
                    setState1();
                    break;
                case 'state2':
                    setState2();
                    break;
                 default:
                    console.error("Unknown state");
            }
        }
    }
}

希望这会对某人有所帮助。