Страница не инициализируется должным образом при резервном копировании из location.href

Я только что закончил писать довольно большое количество Javascript (я избавлю вас от всего, кроме самых важных частей), и у меня осталась только одна проблема.

В какой-то момент мне нужно использовать location.href перейти на страницу статьи. Если пользователь нажимает кнопку "Назад" своего браузера на странице статьи, он возвращается на домашнюю страницу (хорошо), но страница находится в том состоянии, в котором она была при первоначальном выходе (плохо).

Javascript просто не осознает, что страница изменилась, и, что еще более удивительно, не изменился и HTML (есть несколько мест, где я использовал Javascript для изменения стоящего HTML).

Небольшое количество раскрытия: это мобильный сайт. Я слушаю короткое нажатие элемента (в отличие от длинного для перетаскивания), используя сенсорные события. Любой вид не-Javascript связывания, который я пробовал, запутал бит перетаскивания, так как ничто из этого не заботится слишком долго о том, как долго палец опущен, и обычно бесится, если вы пытаетесь переместить палец во время перетаскивания.

Я не могу придумать какой-либо другой код, который был бы здесь ужасно полезен, но я был бы рад опубликовать все, что нужно.

Спасибо!

-S

По запросу ниже приведен соответствующий код:

function t_end(e)
{
    var touch = e.changedTouches[0]; // Get the information for finger #1

    // we only really care if we've been dragging already,
    // and the finger that's been lifted is the same (first)
    // finger from the initial touch.
    if(dragging && !change_ready && touch.identifier == touchID)

    {
        var spd = (100.0 * touch.pageX / $(document).width() - last_touch[0].x)/(new Date() - drag_time);

        // if the finger has been down for a very short time,
        // and is not moving quickly when removed, this will
        // count as a click, and not a drag.
        if(new Date() - start_time < 50 && spd < .2 && spd > -.2)
        {
            debugText("leaving for page @ " + roll_data[current_story].link);
            location.href = roll_data[current_story].link;
        }else{

            var dir, new_story;

            // at higher speeds we will swap stories.
            // at lower speeds will will just return.
            if(spd > .2 || spd < -.2)
            {
                if(spd < 0)
                {
                    new_story = (current_story > 0 ? current_story - 1 : story_count - 1);
                    dir = "r2l";
                }else{
                    new_story = (current_story < story_count - 1 ? current_story + 1 : 0);
                    dir = "l2r";
                }
            }else{
                new_story = current_story;

                // nx: new x.  The point to which the
                // finger has dragged the current story
                var nx = 100.0 * touch.pageX / $(document).width() - anchor_point.x;
                if(nx < 0)
                {
                    current_story = (current_story > 0 ? current_story - 1 : story_count - 1);
                    dir = "l2r";
                }else{
                    current_story = (current_story < story_count - 1 ? current_story + 1 : 0);
                    dir = "r2l";
                }
            }

            change_ready = true;
            dragging = false;

            toStory(new_story, dir, "no", 100);
        }
    }
}
  • Этот код взят из ролика истории, который будет использоваться на мобильном сайте. Истории изменяются в виде списка, прокручивая его с боковой стороны экрана и прокручивая другой.
  • Эта функция - то, на что указывает слушатель сенсорного конца. Всякий раз, когда палец (любой палец) удаляется с экрана, он срабатывает. Хорошую простую разбивку событий касания можно найти здесь.
  • roll_data является Array объектов с несколькими свойствами, включая link (URL).
  • toStory() является функцией, которая скользит к выбранному материалу по заданному слайду, направление (слева направо или справа налево, заданное "l2r" а также "r2l") следует ли изменить положение текущей истории (задано "yes" или же "no") и время, за которое нужно оживить изменение. За исключением первого параметра, все являются необязательными.
  • debugText() это простая функция, которая устанавливает .innerHTML (или скорее, .html() через jQuery) если логическое значение (debugging) правда.

Когда страница резервируется, самыми непосредственными признаками проблемы являются то, что текст отладки все еще присутствует (и установлен на последнюю вещь, на которую он был установлен, в данном случае "уходящий на страницу @ [url]"). Javascript также прекратил кричать (нужно сказать нескольким переменным, что они не закончили работу со страницей только потому, что кто-то щелкнул ею).

Источник

2 ответа

Решение

Можно определить, когда страница оставлена, и затем установить все в требуемое состояние.

<!DOCTYPE html>
<html>
<head>
    <title>unload demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function resetPage() {
            // alert("unload");
            // reset page here
        }
    </script>
</head>
<body onunload="resetPage();">
    hello world
</body>
</html>
Источник

Вместо этого вы можете использовать метод history.pushState, просто сначала убедитесь, что он поддерживается

if (history.pushState)
    history.pushState("", "", url);
else
    window.location = url;
Источник
Другие вопросы по тегам