2012-10-01 62 views
1
  1. 从我的主页,我们称之为mysite.com,我点击它有这个href值的链接:/home/home.php?doc=gym。因此,整个网址是mysite.com/home/home.php?doc=gym#(浏览器在url的末尾添加了#,但我需要在参数之前使插件正常工作)。jQuery插件history.js不是在HTML4浏览器工作正常

  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=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与我写了作为第三参数的最后一件事该函数的参数,因为它是在#之后的符号。

+0

您是否包含history.js的html4 + html5版本? –

+0

是的,我包括它。 – ksairi

+0

有没有更新?你有没有得到它的工作? – Shikyo

回答

2

一些代码示例会很好,但从您的解释我得到的想法,你没有正确实施history.js。

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

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

编辑由四镜:

所以,我做的是:只要加载内容,我执行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。

EDIT 2通过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浏览器中,当你登陆到一个页面时,它不会执行statechange,它会在你pushstate时执行。在这两个,html4和html5浏览器。

编辑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

看到我第一次编辑可能的解决方案来解决这个问题。

+0

嗨Shikyo,谢谢你的快速回答,并为延误感到抱歉。实际上,在插件演示(http://balupton.github.com/history.js/demo/)中,他们只使用statechange事件来记录初始化。点击按钮,他们只是执行pushstate方法,就是这样。此外,这在html4浏览器上工作,我做的确切的事情,唯一的区别是,当我着陆页面,我已经在url上的参数,它看起来该插件不支持html4浏览器或可能确定我做错了什么。 – ksairi

+0

根据您的评论更新我的回答。 – Shikyo

+0

四镜,我做了什么,你告诉我它实际上帮了我,背部和盼着按钮显示正确的内容。 – ksairi

0

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

所以,如果你/任何人都可以给我纸条,那就太好了。

谢谢!

+0

一切正常,除了初始状态(当u点击刷新)的URL是得到一个有点混乱,但这只是history.js的工作方式。在原始答案中查看我的编辑。 – Shikyo

相关问题