1

  1. 在我的主页上，我们称之为mysite.com，我单击具有此href值的链接：/home/home.php?doc=gym。所以，整个 url 是mysite.com/home/home.php?doc=gym#（浏览器#在 url 的末尾添加了，但我需要在参数之前，以便插件正常工作）。

  2. 在该页面上，home.php我单击了一个链接，我捕获了它的事件，加载了一些 Ajax 数据并希望将 url 更改mysite.com/home/home.php?doc=gym为mysite.com/home/home.php?doc=pilates. 所以，我要做的是：一旦加载了内容，我就执行History.pushState(null, null, url);where url = ?doc=pilates。

  3. 这是问题出现的时候，例如在 Internet Explorer 8 中，新的 url 是:mysite.com/home/home.php?doc=gym#home.php?doc=pilates而不是mysite.com/home/home.php?doc=pilates.

  4. 这发生了，我想，因为我在步骤中说的最后一件事1.

  5. 如果我单击另一个链接并执行该pushState方法，它会将 替换为?doc=pilates我作为函数的第三个参数编写的参数，因为它位于#符号之后。

4

2 回答 2

2

一些代码示例会很好，但从你的解释中我明白你没有正确实现history.js。

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

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

Shikyo 编辑：

所以，我要做的是：一旦加载了内容，我就执行 History.pushState(null, null, url);

这就是为什么我认为您没有正确使用它的原因。然后，您必须pushState在statechange事件中加载您的内容并更新 dom。不先更新 dom 然后调用pushState.

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

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

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。

ksairi 编辑 2：

作为更新，我认为当我加载 ajax 内容时，加载和更改 url 时并不重要，因为内容的加载不会影响 url，pushstate 也会影响加载。也许有些东西我不明白。

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

        (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 浏览器中，当你登陆一个页面时，它不会执行 statechange，它会在你 pushstate 时执行。在 html4 和 html5 浏览器中。

Shikyo 编辑 3：

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

在 html5 浏览器中，实际 url 被更改，例如从html4http://mysite.com/中http://mysite.com/page/1的 url 被更改为http://mysite.com/#page=1

请注意，url实际上并没有改变，只是改变了#被称为哈希的后面的位。

服务器不知道哈希背后的内容，因此在 html5 浏览器中，服务器会加载http://mysite.com/page/1，而在 html4 浏览器中，之后的所有内容都#被服务器忽略，因此 url 为http://mysite.com/.

在 html5 浏览器中，会加载正确的内容，因为 url 指向正确的地址。在 html4 浏览器中，您必须手动处理初始状态，因为第一次没有加载内容并且statechange没有触发事件。

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

于 2012-10-01T22:07:22.353 回答
0

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

因此，如果您/任何人都可以给我笔记，那就太好了。

谢谢！

于 2012-10-04T22:54:51.910 回答