jQuery插件history.js不是在HTML4浏览器中正常工作 [英] jquery plugin history.js not working properly in html4 browsers

问题描述

1. 从我的主页，我们称之为 mysite.com ，我点击其中有一个链接，这个的href 值： /home/home.php?doc=gym 。因此，整个网址为 mysite.com/home/home.php?doc=gym＃（浏览器添加＃在网址的结尾，但我需要的是参数前，以插件正常工作）。




2. 在这个页面， home.php ，我点击一个链接，我抓住了它的事件，加载一些Ajax数据，并希望更改网址 mysite.com/home/home.php?doc=gym 到 mysite.com/home/home.php?doc=pilates 。所以，我做的是：只要加载内容，我执行 History.pushState（NULL，NULL，URL）; 其中，url = ？DOC =普拉提。




3. 下面是当问题来了，在Internet Explorer 8，例如，新的URL是： mysite.com/home/home.php?doc=gym#home.php？ DOC =普拉提而不是 mysite.com/home/home.php?doc=pilates 。




4. 和发生这种情况，我想，是因为我在步骤说的最后一件事 1




5. 如果我点击另一个链接并执行 pushState的方法，它取代了？DOC =普拉提与参数我写的函数的第三个参数，因为它是＃符号之后。




解决方案

有些code例子将是很好的，但是从你的解释我让你没有正确实施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事件：

  //如果pushState的是模拟（HTML4浏览器），我们有（URL中的'＃'）的哈希触发stateChange事件
如果（History.emulated.pushState＆放大器;＆放大器; History.getHash（））
{
    $（文件）。就绪（函数（）
    {
        History.Adapter.trigger（窗口statechange）;
    }）;
}
 

当然，处理 statechange 事件中操纵任何DOM。

编辑2由ksairi：

作为一个更新，我觉得作为我加载Ajax内容，当我加载它并不重要，当我更改URL，监守内容的负载不会影响该URL也不影响pushState的加载。也许有一些东西我不理解。

从演示的code的部分其实是这样的：

 （功能（窗口，未定义）{            VAR
                记录=的window.history，
                状态= History.getState（），
                $日志= $（'＃日志'）;            //登录初始状态
            History.log（'最初的：'，State.data，State.title，State.url）;            //绑定到状态更改
            History.Adapter.bind（窗口'statechange'，函数（）{//注意：我们正在使用statechange代替popstate的
                //登录国家
                无功状态= History.getState（）; //注意：我们正在使用History.getState（）而不是event.state
                History.log（'statechange：'，State.data，State.title，State.url）;
            }）;        }）（窗口）;
 

正如你所看到的，History.getState（）被执行，我在IE8测试了。

在HTML5的浏览器，当你登陆到一个页面，它不执行statechange，但它确实做它时，你pushState的。在这两个，HTML4和HTML5的浏览器。

按Shikyo编辑3：

好吧，这就是为什么你需要做的初始状态为东西HTML4浏览器特别：

在HTML5浏览器的实际URL得到改变，例如从 http://mysite.com/ 到 http://mysite.com /页/ 1 HTML4中的URL被更改为 http://mysite.com/#page=1

请注意该URL实际上并没有改变，只是在后位＃被称为哈希被改变。

服务器不知道是什么来的哈希后面所以在HTML5浏览器的服务器负载 http://mysite.com/page/1 和HTML4浏览器后一切在＃由服务器忽略这样的URL是 http://mysite.com/ 。

在HTML5的浏览器正确的内容被加载，因为URL指向正确的地址。在HTML4浏览器，你必须照顾初始状态的手动，因为内容不是第一次加载和 statechange 事件不会被触发。

看我为可能的解决方案首先编辑这个问题。

1. From my homepage, let's call it mysite.com, I click a link which has this href value: /home/home.php?doc=gym. So, the entire url is mysite.com/home/home.php?doc=gym# (The browser adds the # at the end of the url, but I need that to be before the parameters in order the plugin works fine).

2. From that page, home.php, I clicked a link that I caught its event, load some Ajax data and want to change the url mysite.com/home/home.php?doc=gym to mysite.com/home/home.php?doc=pilates. So, what I do is: as soon as the content is loaded, I execute History.pushState(null, null, url); where url = ?doc=pilates.

3. Here is when the problem comes, in Internet Explorer 8, for example, the new url is: mysite.com/home/home.php?doc=gym#home.php?doc=pilates instead of mysite.com/home/home.php?doc=pilates.

4. And this happens, I suppose, because of the last thing I said in step 1.

5. If I click another link and execute the pushState method, it replaces the ?doc=pilates with the parameters I wrote as a third parameter of the function, because it's after the # symbol.

解决方案

Some code examples would be nice but from your explanation i get the idea you are not implementing history.js correctly.

You have to push state in the href click event then catch the statechange event and do your ajax loading and dom manipulation there.

You have to use it like that because the statechange event fires when you call the pushState function.

EDIT by Shikyo:

So, what I do is: as soon as the content is loaded, I execute History.pushState(null, null, url);

That is why i got the idea you are not using it correctly. You have to pushState then in the statechange event load your content and update the dom. Not update the dom first then call pushState.

As for the initial state in html4 browsers the history.js plugin does never fire a initial state change event.

I found 2 solutions for taking care of the initial state in html 4 browsers:

1) Call History.getState() in a document ready event and take care of the initial state.

2) Trigger the statechange event yourself:

// 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");
    });
}

And of course handle any DOM manipulated inside the statechange event.

EDIT 2 by ksairi:

As an update, I think that as I'm loading ajax content it does not matter when I load and when I change the url, becuase the loading of the content does not affect the url nor the pushstate affect the loading. Maybe there is something I am not understanding.

Actually part of the code from the demo is the following:

        (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);

As you can see, History.getState() is executed and I tested that in IE8.

In html5 browsers, when you land to a page, it doesn't execute the statechange, it does do it when you pushstate. In both, html4 and html5 browsers.

EDIT 3 by Shikyo:

Ok this is why you need to do something special in html4 browsers for the initial state:

In html5 browsers the actual url gets changed, for example from http://mysite.com/ to http://mysite.com/page/1 in html4 the url gets changed to http://mysite.com/#page=1

Note that the url is not actually changed, only the bit after the # which is called a hash is changed.

The server does not know what comes behind the hash so in html5 browsers the servers loads http://mysite.com/page/1 and in html4 browsers everything after the # is ignored by the server so the url is http://mysite.com/.

In html5 browsers the correct content gets loaded because the url points to the right address. In html4 browsers you have to take care of the initial state manually because the content is not loaded the first time and the statechange event is not triggered.

See my first edit for possible solutions to this problem.

这篇关于jQuery插件history.js不是在HTML4浏览器中正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！