Question

在我的主页上，我们将其称为mysite.com，然后点击具有此href值的链接：/home/home.php?doc=gym。因此，整个网址为mysite.com/home/home.php?doc=gym#（浏览器会在网址末尾添加#，但我需要在参数之前将插件正常工作。
< / LI>
在该页面home.php，我点击了一个我发现其事件的链接，加载了一些Ajax数据，并希望将网址mysite.com/home/home.php?doc=gym更改为mysite.com/home/home.php?doc=pilates。所以，我所做的是：加载内容后，我会执行History.pushState(null, null, url);，其中url = ?doc=pilates。
以下是问题出现时，例如，在Internet Explorer 8中，新网址为：mysite.com/home/home.php?doc=gym#home.php?doc=pilates而不是mysite.com/home/home.php?doc=pilates。
这种情况发生了，我想，因为我在步骤1.中说的最后一件事
如果我单击另一个链接并执行pushState方法，它会将?doc=pilates替换为我写的参数作为函数的第三个参数，因为它位于{{1}之后}符号。

Answer 1

一些代码示例会很好但是根据您的解释，我明白您没有正确实现history.js。

你必须在href click事件中推送状态然后捕获statechange事件并在那里进行ajax加载和dom操作。

你必须这样使用它，因为当你调用statechange函数时会触发pushState事件。

Shikyo编辑：

所以，我所做的是：加载内容后，我执行History.pushState（null，null，url）;

这就是我知道你没有正确使用它的原因。您必须pushState然后在statechange事件中加载您的内容并更新dom。不要先更新dom，然后拨打pushState。

至于html4浏览器中的初始状态，history.js插件永远不会触发初始状态更改事件。

我在html 4浏览器中找到了2种处理初始状态的解决方案：

1）在文档就绪事件中调用History.getState()并处理初始状态。

2）自己触发statechange事件：

// If pushState is emulated (html4 browsers) and we have a hash (a '#' in the url) trigger the statechange event
if (History.emulated.pushState && History.getHash())
{
    $(document).ready(function()
    {
        History.Adapter.trigger(window, "statechange");
    });
}

当然可以处理statechange事件中操作的任何DOM。

编辑2 by ksairi：

作为更新，我认为当我加载ajax内容时，加载和更改url时无关紧要，因为加载内容不会影响url，也不会影响加载。也许有一些我不理解的东西。

实际上，演示中的部分代码如下：

        (function(window,undefined){

            var
                History = window.History,
                State = History.getState(),
                $log = $('#log');

            // Log Initial State
            History.log('initial:', State.data, State.title, State.url);

            // Bind to State Change
            History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
                // Log the State
                var State = History.getState(); // Note: We are using History.getState() instead of event.state
                History.log('statechange:', State.data, State.title, State.url);
            });

        })(window);

如您所见，执行History.getState（）并在IE8中对其进行了测试。

在html5浏览器中，当您登陆页面时，它不会执行状态转换，它会在您按下状态时执行。在html4和html5浏览器中。

Shikyo编辑3：

好的，这就是为什么你需要在初始状态的html4浏览器中做一些特别的事情：

在html5浏览器中，实际网址会发生变化，例如在html4中从http://mysite.com/更改为http://mysite.com/page/1，网址会更改为http://mysite.com/#page=1

请注意，实际上并未更改url，只会更改#之后称为哈希的位。

服务器不知道散列后面是什么，所以在html5浏览器中，服务器加载http://mysite.com/page/1，在html4浏览器中，服务器忽略#之后的所有内容，因此网址为{{1} }。

在html5浏览器中，正确的内容被加载，因为url指向正确的地址。在html4浏览器中，您必须手动处理初始状态，因为第一次未加载内容且未触发http://mysite.com/事件。

请参阅我的第一次编辑，了解此问题的可能解决方案。

Answer 2

Shikyo，我做了你告诉我的事情，它实际上帮助了我，后面和前面的按钮现在显示正确的内容。谢谢你，我没有想到那些行为。不幸的是，问题仍然存在于html4浏览器中。该页面是galagym.com/home/home.php。您可以进入左侧的不同部分，查看网址的错误行为，当然是在html4浏览器中。在html5浏览器中，它可以很好地工作。

所以如果你/任何人可以给我笔记，那就太好了。

谢谢！

jquery插件history.js在html4浏览器中无法正常工作

2 个答案: