Как этот Ajax-вызов сохраняет изменения DOM в кэше браузера? - PullRequest
Новая
       5

Как этот Ajax-вызов сохраняет изменения DOM в кэше браузера?

2 голосов
/ 17 апреля 2010

Для цели вопроса мне нужно создать простой вымышленный сценарий.

У меня есть следующая тривиальная страница с одной ссылкой, назовите ее страницей A: 

<a class="red-anchor" onclick="change_color(event);" href="http://mysite.com/b/">B</a>

Со связанной функцией Javascript: 

function change_color(e)
{
  var event = e || window.event;
  var link = event.target;
  link.className = "green-anchor";
}

И у меня есть соответствующий CSS, чтобы сделать якорь красным или зеленым на основе имени класса.

Это работает. То есть, когда я нажимаю на якорь, он меняет цвет с красного на зеленый, который кратковременно виден до того, как браузер загрузит страницу B.

Но если я затем использую кнопку НАЗАД, чтобы вернуться на страницу А, я получаю различное поведение в разных браузерах.

  • В Safari якорь все еще зеленый (желаемое поведение)
  • В Firefox он становится красным

Я полагаю, что Safari каким-то образом обновляет свою кэшированную версию страницы, а Firefox нет.

Итак, мой первый вопрос: есть ли способ заставить FF обновить кэшированную страницу, или здесь что-то еще происходит?

Во-вторых: у меня другая реализация, где я использую ajax-вызов. В этом я установил класс якоря, используя переменную сеанса, что-то вроде ... 

<a class="<?php echo $_SESSION["color"]; ?>"  ...[snip]... >B</a>

И функция javascript выполняет дополнительный вызов ajax, который изменяет переменную сеанса color.

В этом случае Safari и Firefox работают как положено. При возвращении из B в A цвет все еще зеленый. Но я не могу понять, почему это должно отличаться от случая без AJAX. Я перепробовал много разных перестановок, и чтобы он работал на FF, переменная сеанса "color" ДОЛЖНА изменяться (то есть сам вызов ajax не каким-то образом перезагружает кэш). Но при возвращении НАЗАД страница перезагружается из кэша (проверено в Firebug), так как же страница получает доступ к этой переменной сеанса, если она не обрабатывает страницу и не запускает этот фрагмент php в привязке?

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

Ответы [ 2 ]

3 голосов
/ 18 апреля 2010

Чтобы ответить на мой собственный вопрос, это была проблема с кешированием. Safari не кэшировал страницу, из-за чего мне показалось, что мои изменения Javascript в DOM сохранились после перехода и возврата с помощью кнопки BACK.

Подведем итог:

  1. Никакие изменения Javascript после загрузки страницы в DOM не сохраняются ни в одном из браузеров, поскольку кэшированная версия является той, которая изначально была загружена со страницей
  2. FF и Safari вели себя по-разному, потому что FF требует "no-store" в директиве заголовка Cache-Control - "no-cache" недостаточно для отключения кэширования для страницы

Подробнее о # 2 можно найти здесь: http://blog.httpwatch.com/2008/10/15/two-important-differences-between-firefox-and-ie-caching/

1 голос
/ 18 апреля 2010

В Firefox он становится красным

Он не возвращает в красный цвет, а остается красным. Это не новая страница, когда вы «возвращаетесь» к ней, это точно такой же объект страницы: она была скрыта , когда вы отошли от нее, а не сразу отброшена; когда вы возвращаете старый DOM, он возвращается на экран вместе со всеми изменениями, которые вы в него вносили, и все содержимое скрипта, работающее в нем, продолжает работать.

Эта функция называется bfcache , и она есть у Firefox и Safari (как и у Opera). Я не знаю, почему в Safari это не срабатывает ... может быть, в браузерах есть какие-то другие настройки кэширования, вы очищали страницу из кэша, перемещаясь или дольше ожидая, или что-то в этом роде.

есть ли способ получить FF для обновления кэшированной страницы

Хорошо, вы можете сломать bfcache, установив любой обработчик событий на onunload (даже ничего не делать function() {}), но это не идеально. Вы будете делать ненужную медленную навигацию по своим страницам. Какова цель изменения цвета, что должно указывать на то, что нужно сбросить, когда вы вернетесь?

Что должно произойти, если вы нажмете на ссылку, а затем нажмете Escape, чтобы отменить навигацию? Как насчет возврата цвета на setTimeout вызове, навигации или нет?

...