Question

我有一个申请。当用户点击＆＃34;添加到购物车＆＃34;或＆＃34;保存项目＆＃34;它调用适当的URL来保存数据，然后将用户重定向到正确的页面：

      if (add_to_cart == true) //If we are adding to cart
      {
        $.ajax
        (
          {
            //Note: tf_cart.module must contain $_POST['app'] $jpg = xmlp_f_save_jpg($_POST['file'], $_POST['app']);
            type: "POST",
            processData: false,
            url:  SITE_URL + "/system/atc/" + app_type + "/0/" + session_id + "/0/?prjid=" + project_id, //send data to this url
            data: "xml=" + common_order_xml + "&prodid=" + product_id + "&file=" + image.src + "&rid=" + revision_id + "&cid=" + cart_id + "&app=html5" //send these as post variables to the url
          }
        ).done(function(msg) //When we get a response from the server after we POST
        {
          //console.log("Project added to cart. "); //This is for testing the canvas element on screen - leave this code here
          window.location = SITE_URL + "/cart/?pid=" + partner_id; //Send the user to the cart page
        });
      }
      else //If we are saving the project
      {
        $.ajax
        (
          {
            //Note: xmlproject.module must contain $_POST['app'] $jpg = xmlp_f_save_jpg( $_POST['file'], $_POST['app'] );
            type: "POST",
            processData: false,
            url:  SITE_URL + "/system/xml/import/" + app_type + "/" + session_id + "/?prjid=" + project_id, //send data to this url
            data: "xml=" + common_order_xml + "&prodid=" + product_id + "&file=" + image.src + "&app=html5&rid=" + revision_id //send these as post variables to the url
          }
        ).done(function(msg)  //When we get a response from the server after we POST
        {
          var parser = new DOMParser(); //create a new DOMParser
          var doc = parser.parseFromString(msg, "application/xml"); //convert the string to xml
          pid = doc.getElementsByTagName('pid')[0].childNodes[0].nodeValue; //Get the pid (project id) from the xml
          rid = doc.getElementsByTagName('rid')[0].childNodes[0].nodeValue; //Get the rid (revision id) from the xml
          //console.log("Project saved. " + " pid=" + pid + " rid=" + rid); //This is for testing the canvas element on screen - leave this code here
          window.location = SITE_URL + "/user/mystuff/projects/view/" + pid + "/?pid=" + partner_id; //Send the user to this project's page
        });
      }

我遇到的问题是，一旦用户处于项目页面或购物车页面，他们点击后退按钮，它会将它们返回给具有空白项目的应用程序。我想要发生的是当他们点击后退按钮时，该项目被加载。

我不确定如何解决这个问题......任何想法？

Answer 1

您可以通过几种不同的方式解决问题：

SOLUTION ONE（推荐imho）：在更新购物车或保存项目的同时，使用购物车/项目pid创建session-cookie。如果用户返回应用程序页面（您的主页？），请检查是否存在此会话，然后重新加载或重定向到购物车/项目。

解决方案二（有点hackish）：不是将用户重定向到购物车/项目的网址，而是将他重定向到中间页面。此页面将再次重定向用户（read here），但这次是真实的购物车/项目页面。当用户按下后退按钮时，他将返回然后再转到他的购物车/项目页面。

解决方案三：使用onbeforeunload事件警告用户并让他有机会取消他回去的行动（每当用户卸载页面时此事件就会触发，这不是一个好的解决方案）。

解决方案四：使用HTML5 pushState来操纵用户的浏览器历史记录。 Here是一些可能对您有帮助的信息。（我自己没有尝试过，所以我无法保证任何事情。）

SOLUTION FIVE（混合型）：如果您的网站更像是APP，那么您应该考虑使用其他整个架构和工作流程。您可以使用客户端javascript库进行动态视图和DOM操作，例如Google's AngularJS或Facebook's React。每当他需要查看新内容（从主页面到购物车页面到项目页面等）时，不要将客户端引导到新页面，因为这实际上是一个完整的页面重新加载，并且当客户端返回历史记录时每页都从头开始重新加载。相反，使用Ajax加载新内容（例如，像<a href="/cart/?pid">go to cart</a>这样的链接应该替换为<a href="#" onclick="loadCart(pid);">go to cart</a>），用于更新页面的js库和HTML5 pushState更改用户的历史状态。将客户端的购物车和项目保存为session-cookie或localStorage，以便在客户按“返回”时快速获取此数据。或者＆＃39;转发＆＃39;按钮，然后加载并向他显示适当的内容。

Answer 2

在我的脚本开头，我检查是否存在cookie，如果它在那里我删除了cookie（如果他们再次保存/添加到购物车将生成一个新的）并重新加载带有cookie的页面信息：

function common_init()
{
  var cookie = common_get_cookie("project_parameters");

  //Send the user back to the project they are working on when they hit the back button - AC 2014-12-04
  if ("" != cookie)
  {
    document.cookie = "project_parameters=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
    window.location.href = (SITE_URL + "/Custom_App/?" + cookie);
  }
  //more code follows
}

并在保存项目/添加到购物车功能中，我添加了：

document.cookie="project_parameters=app_type" + app_type + "&session_id=" + session_id + "&cart_id=" + cart_id + "&prjid=" + pid + "&rid=" + rid;

如何在用户点击后退按钮时加载项目？

2 个答案: