javascript - jquery 插件 history.js 在 html4 浏览器中不能正常工作

Question

1. 在我的主页上，我们称它为 mysite.com，我单击具有此 href 值的链接:/home/home.php ?doc=健身房。所以，整个 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);，其中 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 替换为我作为函数的第三个参数编写的参数，因为它在 # 符号之后。

Answer 1

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

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

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

Shikyo 编辑:

So, what I do is: as soon as the content is loaded, I execute 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 也不会影响加载。也许有些事情我不明白。

Demo中的部分代码如下:

        (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 会发生变化，例如从 http://mysite.com/ 到 http://mysite.com/page/1 html4 网址更改为 http://mysite.com/#page=1

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

服务器不知道散列后面是什么，所以在 html5 浏览器中服务器加载 http://mysite.com/page/1 而在 html4 浏览器中 # 被服务器忽略，所以 url 是 http://mysite.com/。

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

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