2

出于这个问题的目的，我需要创建一个简单的虚构场景。

我有以下带有一个链接的简单页面，称之为页面 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 之前短暂可见。

但是，如果我随后使用 BACK 按钮返回页面 AI 在不同的浏览器中会得到不同的行为。

  • 在 Safari 中，锚仍然是绿色的（期望的行为）
  • 在 Firefox 中它恢复为红色

我想 Safari 正在以某种方式更新其页面的缓存版本，而 Firefox 则没有。

所以我的第一个问题是：有什么方法可以让 FF 更新缓存页面，还是这里发生了其他事情？

其次：我有一个不同的实现，我使用 ajax 调用。在此我使用会话变量设置锚的类，例如......

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

并且 javascript 函数进行了一个额外的 ajax 调用来更改“颜色”会话变量。

In this case both Safari and Firefox work as expected. When going back from B to A the color is still green. But I can't for the life of me figure out why it should be different to the non-ajax case. I have tried many different permutations and for it to work on FF the "color" session variable MUST change (i.e. the ajax call itself is not somehow reloading the cache). But on coming BACK, the page is being reloaded from the cache (verified in Firebug), so how is the page even accessing this session variable if it isn't reprocessing the page and running that fragment of php in the anchor?

I figure there must be something fundamental here that I am not understanding. Any insight would be much appreciated.

4

2 回答 2

3

To answer my own question, this was a caching issue. Safari wasn't caching the page, which made it appear to me that my Javascript changes to the DOM had persisted through navigating away and returning using the BACK button.

To summarize:

  1. No post-page-load Javascript changes to the DOM survive on either browser because the cached version is the one originally loaded with the page
  2. FF and Safari were behaving differently because FF needs "no-store" in the Cache-Control header directive - "no-cache" is not sufficient to disable caching for the page

More on #2 can be found here: http://blog.httpwatch.com/2008/10/15/two-important-differences-between-firefox-and-ie-caching/

于 2010-04-17T23:05:02.627 回答
1

In Firefox it reverts to red

It doesn't revert to red so much as it remains red. It's not a new page when you go ‘back’ to it, it's the exact same page object: it was only hidden when you navigated away from it, not immediately discarded; when you return the old DOM gets pulled back onto the screen together with all the changed you made to it and all the script content running in it continues to operate.

This feature is called the bfcache and both Firefox and Safari have it (as well as Opera). I don't know why it's not kicking in for you in Safari... maybe there are some different caching settings in the browsers, you you cleared the page from cache by navigating or waiting longer, or something.

is there any way to get FF to update the cached page

Well you can break the bfcache by setting any event handler on onunload (even a do-nothing function() {}), but it's not ideal. You'll make navigation around your pages needlessly slower. What is the purpose of the colour change, what's it supposed to indicate that needs to be reset when you go back?

What should happen if you click the link and then hit Escape to cancel the navigation? How about setting the colour back on a setTimeout call, navigation or not?

于 2010-04-17T20:03:37.833 回答