Question

我有这个html索引页面，问题是历史api（只加载div中所需的.jsp并更改uri）只能在索引页面上工作，如果我在uri中刷新或输入，它只显示所需的.jsp而不再显示菜单：

ps：我正在使用MVC（VRaptor）

的index.jsp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <!-- font-awesome icons -->
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css">

    <!-- Bootstrap -->

    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

  <div style="width:100%;"> 
<div id="menu" style="float:left; width:20%;">
</div>
<div id="header" class="well">Bem vindo<b> ${userLogado.nome }</b></div>
<div id="conteudo" style="float:right; width:80%; ">
</div>

</div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/menuLoad.js"></script> 

  </body>
</html>

jquery：

$(document).ready(function(){
        $("#menu").load("/restrict/menu");        
    });

$('a').click(function() {
    pageurl = $(this).attr('href');
    if(pageurl!=window.location){
        window.history.pushState({path:pageurl},'',pageurl);
        }
     $('#conteudo').load($(this).attr('href'), function(responseText, statusText, xhr)
                {

         if(xhr.status == 403) { 
             $('#conteudo').load("/error/error403");

         }
         if(xhr.status == 404) { 
             $('#conteudo').load("/error/error404");

         }
         if(xhr.status == 405) { 
             $('#conteudo').load("/error/error405");

         }

         /*
         if(statusText == "success")
                 alert("Successfully loaded the content!");
         if(statusText == "error")
                 alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
                 */
 });

      return false;
    });

所以每次调用这个JS而不是在#conteudo中加载href，但我直接在uri / restrict / menu中输入它只显示未格式化的bootstrap菜单，因为bootstap的bootstrap.js，bootstrap.css在index.jsp而不是在menu.jsp中，还有另一个解决方案，用于用户进行刷新以不仅显示所需的.jsp，而且还显示index.jsp，但显示#conteudo中的写入链接？ / p>

对不起，如果我不清楚

Answer 1

History API允许用户通过点击＆＃34; back＆＃34;来操纵历史堆栈的内容。或＆＃34; next＆＃34;按钮。网址将被替换为新网址，但不会导致浏览器从新网址加载文档。它只是将状态对象推送到堆栈，然后更改URL。

似乎您正在使用PJAX技术异步加载部分内容而不是加载整个页面。输入uri或刷新页面将向服务器发送请求，浏览器将加载新页面。因此，您必须在后端识别请求的类型 - 如果它是＆＃34; PJAX＆＃34;则返回部分内容。请求或返回整页，如果它是正常请求。

例如，我假设您的Web结构如下所示：

/index
------/about
------/experience
------/contact

即使用户通过输入/ index / about url访问该页面，您也希望在用户单击主页面上的链接时异步加载这三个链接的部分内容。

第1步：添加自定义标题＆＃34; X-PJAX＆＃34;这使得后端可以识别请求的类型

pageurl = $(this).attr('href');
$.ajax({
    url: $(this).attr('href'),
    dataType: "html",
    beforeSend: function(xhr){
        xhr.setRequestHeader('X-PJAX', 'true')
    },
    success: function(response){
        $('#conteudo').empty().append(response);
        history.pushState({path:pageurl},'',pageurl)
    }
});

第2步：确定请求类型并在后端返回正确的响应

if(header contains X-PJAX header){
    //return partial content
}else{
    //return full page
}

Answer 2

希望您找到了解决问题的方法。但是，可能有谁遇到同样的问题，可能会对我的回答有所帮助。

我有一个类似的问题，这就是我解决它的方式。我已经从http://diveintohtml5.info/history.html

获得了参考

您需要在函数中使用此行代码来更改URL，该代码用于加载内容

// dispatch with a payload
store.dispatch('scheduleTickets', purchase)

然后使用它来处理浏览器导航按钮的后退和前进

     history.pushState(null,null,strURL);

HTML 5历史记录api仅适用于索引页面

2 个答案: