HTML 5历史api只能从索引页工作

HTML 5 history api only work from index page

本文关键字：索引 工作 历史 api HTML      更新时间：2023-09-26

我有这个HTML索引页，问题是历史API(只加载想要的。jsp内的div和改变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然后加载# contteudo内的href，但我直接在uri/restrict/menu中输入它只显示未格式化的引导菜单，因为bootstrap. JS, bootstrap.css for bootstrap是在index.jsp而不是在menu.jsp中，还有另一种解决方案的情况下，当用户做刷新不只是显示所需的。jsp，但也index.jsp，但显示# contteudo内写的链接?

对不起，如果我不清楚

历史API允许用户通过点击"后退"或"下一步"按钮来操作历史堆栈的内容。Url将被替换为新的Url，但不会导致浏览器从新的Url加载文档。它只是将状态对象推入堆栈，然后更改URL。

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

例如，我假设你的网页结构是这样的:

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

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

第1步:添加自定义头"X-PJAX"，使后端可以识别请求的类型

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
}

希望你已经找到解决问题的办法了。但是希望有同样问题的人能从我的回答中得到帮助。

我有一个类似的问题，这是我如何解决它。我参考了http://diveintohtml5.info/history.html

你需要在你的函数中使用这行代码来改变URL，这行代码用来加载

内容
     history.pushState(null,null,strURL);

然后使用它来处理浏览器导航按钮的点击

  function navigate(href) {
    var req = new XMLHttpRequest();
    req.open("GET", "YOUR URL"+href.split("/").pop(),false); 
    req.send(null);
    if (req.status == 200) {
      document.getElementById("div1").innerHTML = req.responseText;
      $("#div").load(" #div").hide().fadeIn(1000);
      return true;
     }
    return false;
   }
 window.addEventListener("popstate", function(e) {
 navigate(location.pathname);});
 e.preventDefault();
 }
相关文章：