Question

我正在使用History.js通过菜单导航用户。

Menu            content

home           |-------|   
books          |       |
vidoes         |       |
about          |_______|

HTML：

<div class="menu" id="home">Home</div>
<div class="menu" id="books">Books</div>
<div class="menu" id="videos">Videos</div>
<div class="menu" id="about">About</div>
<div id="container_main_content"></div>

jquery的：

$(
function() 
{

// Prepare
var History = window.History; // Note: We are using a capital H instead of a lower h
if ( !History.enabled ) {
     // History.js is disabled for this browser.
     // This is because we can optionally choose to support HTML4 browsers or not.
    return false;
}

// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function() 
{ // Note: We are using statechange instead of popstate
    var State = History.getState();
    console.log(State);
    $.get(State.url,function(data)
        {   
            $("#container_main_content").html("");
            $("#container_main_content").append(data);
        });
});

$('.menu').click(function(evt) 
{
    switch(evt.target.id)
    {
        case "home":History.pushState(null, $(this).text(), "/main/main.php?state="+evt.target.id+"&action=nav");
break;
case "books": History.pushState(null, $(this).text(), "/books/books.php?state="+evt.target.id+"&action=nav");
break;
/*and so on....*/
}

问题是，History.pushState（）中指定的url只是一个回复数据样式的php脚本。因此，当用户重新加载页面时，新页面具有随意排列的元素而没有任何样式。关于如何克服这个问题的任何建议？提前谢谢。

Answer 1

我的想法：在这些网址下提供包含布局和相应内容的完整页面。所以直接访问后它显示正确。你需要“第二版”来获取ajax请求。它可以通过获取ajax的其他版本来完成，例如在此网址下books.php?state=1&action=nav&ajax=true当然，请将此网址books.php?state=1&action=nav（没有ajax变量）推入历史记录。

在php中这样做：

if($_GET['ajax']!='true') {
    //echo layout head
}

//echo content

if($_GET['ajax']!='true') {
    //echo layout foot
}

在重新加载页面时使用History.js时遇到问题

1 个答案: