Как загрузить проект, когда пользователь нажимает кнопку «Назад»?

Question

У меня есть приложение. Когда пользователь нажимает кнопку «Добавить в корзину» или «Save Project» это вызывает соответствующий 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

Вы можете решить проблему несколько различных способов:

РЕШЕНИЕ ОДНОГО (рекомендуются IMHO): Наряду с обновления телеги или сохранить проект, создать session-cookie с тележкой/проектом pid. Если пользователи вернутся на страницу приложения (ваша главная страница?), Проверьте наличие этого сеанса, а затем перезагрузите или перенаправьте в корзину/проект.

РЕШЕНИЕ ДВА (немного хакерское): вместо перенаправления пользователя на адрес тележки/проекта перенаправить его на промежуточную страницу. Эта страница снова перенаправляет пользователя (read here), но на этот раз на настоящую страницу корзины/проекта. Когда пользователь нажмет кнопку «Назад», он вернется, а затем переместится на страницу тележки/проекта.

РЕШЕНИЕ ТРЕТЬЯ: Используйте событие onbeforeunload, чтобы предупредить пользователя и дать ему возможность отменить его действие возврата (это событие срабатывает всякий раз, когда пользователь выгружает страницу, и это нехорошее решение imho).

РЕШЕНИЕ ЧЕТВЕРТАЯ. Используйте HTML5 pushState, чтобы управлять историей браузера пользователя. Here - это информация, которая может вам помочь. (Я сам не пробовал, поэтому ничего не могу гарантировать).

РЕШЕНИЕ ПЯТЬ (гибрид): Если ваш сайт является скорее 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, чтобы быстро извлекать эти данные, когда клиент нажимает кнопки «назад» или «вперед», а затем загружает и показывает соответствующий контент.

Answer 2

В начале моего сценария я проверяю наличие файла 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;