2

I have a page that pulls an external JavaScript file, which then generates some content dynamically into that page (basically inserts some DIVs and a Flash object).

When ever the user navigates away from this page and then pushes the 'back' button, Safari and Firefox display the generated content, but IE 8 does not.

What is the best practice for IE to retain dynamic content in history? Or do I have to listen for some specific event and then restart my JavaScript?

BTW, I have jQuery in place, so relevant plugin suggestions are also welcome.

EDIT: here is link to demo: http://mmstest.eenet.ee/embed/281

If you click the Google link at the bottom and then go Back, Safari and FF will show you the video again, IE8 does not.

Laas
  • 5,978
  • 33
  • 52
  • Do you have a live link available? It's possible it's your IE8 settings. – wdm Apr 19 '11 at 13:38
  • IE has a great cache. So great, it loads whatever was shown before and does no processing. Try to set cache header to no-cache, maybe it works for you. – Alfabravo Apr 19 '11 at 13:39
  • Does the content get generated and inserted on JQuery's document ready event? *From my observations* how browsers implement the "Back" button differs, but reloading the page (often times using the cache) is the simplest and suffices (Maybe IE only does that?)- this means that unless the previously generated dynamic content does not get generated again, it will not show up. I have noticed in some cases that Chrome and FF tend to also "save" the last state of the page so that if dynamic content is generated clicking "Back" will restore the previous page state even if generated dynamically. – KTF Apr 19 '11 at 13:43
  • @KTF: Hmm, my experience with FF4 is that changes *after* the page has been loaded are not preserved when going forth and back. – Marcel Korpel Apr 19 '11 at 13:49
  • @Marcel Korpel: I'm working on an application and just this past Saturday I was using FF to test it, I remembered it retained the last state of the page but now that I think about it they were only the form values so I think you're right, Marcel- and that's probably the case with both FF and Chrome; I take that back. Regardless as AFAIK, if the dynamic content generation happens on JQuery's document ready it should take place even if you're pulling from cache. – KTF Apr 19 '11 at 13:57
  • @KTF: AFAIK (but I'm no means an expert regarding page states), Opera is the only browser retaining page states; it even drives some developers crazy, because it doesn't fire `onload` when going back. – Marcel Korpel Apr 19 '11 at 14:02
  • I updated the question with demo link. We do not currently start the script from `$(document).ready()` because we do not know if jQuery is already loaded. If it is not, the script itself loads it beforehand. – Laas Apr 19 '11 at 14:36

2 Answers2

1

I did a quick test using the IE Developer toolbar- I clicked back and nothing happened as you mentioned. I then tried again but before clicking back I cleared my cache, and when I went back the video showed up.

Try ensuring you force IE to clear the browser cache and your video should load even when clicking on the back page.

---- EDIT ADDED AFTER CACHING CONVERSATION ---

This should not affect the performance of your web application the client browser gains from caching, since you would send back headers to expire/disable the cache only for the page that fires off the JS to embed the video. Everything else- the JS scripts, the graphic/images, and event the video- would still be cached by the client.

---- EDIT: UPDATED TO INCLUDE FULL SOLUTION FROM COMMENTS ---

To disable caching of included JavaScript files one solution is to just append random number in query parameter to the URL, so that browser will not cache the result.

<script src="jquery.js?t=<?PHP echo rand() ?>">

This avoids the need to modify webserver settings to disable caching static JavaScript files system-wide.

Laas
  • 5,978
  • 33
  • 52
KTF
  • 1,349
  • 2
  • 14
  • 21
  • Disabling cache is in my opinion the last resort, as the video will be embedded in a bigger site with lots of graphics, etc that could benefit from caching. I was looking for some event that I could bind. E.g in the lines of `onFocus` or smth similar, but which would be triggered when hitting back button. – Laas Apr 20 '11 at 06:09
  • Note that if you disable the cache for the page, IE will always request and refresh the markup (HTML) you will not be disabling the cache for the images and graphics, if that is a concern- of even the scripts. – KTF Apr 20 '11 at 14:14
  • Hmm... now I wonder which server exactly I should disable the cache for best results - the script is generated on one server and it is embedded in HTML from another. Probably the latter, but the sad thing is that if somebody else embeds this script with HTML not under my control, then this won't work. – Laas Apr 20 '11 at 17:33
  • You would only disable the cache when the specific page is requested- you wouldn't disable the cache for every page/resource on the server. (I'm actually not quite sure what you mean even by that since caching is done by the browser) – KTF Apr 20 '11 at 19:32
  • @KTF, thanks for the idea - I set no-cache headers and verified from server logs that IE does fetch both the page and the JS file from server again. But still not displaying the video. On the other hand, when I "Clear cache for this domain" from Dev Tools (F12), then it works. This leads me to think that I have something fishy in my script that gets cached, maybe some runtime vars or smth that I need to reset when reloading the page. – Laas Apr 21 '11 at 09:38
  • Yey, finally nailed the problem. Turned out that as my javascript was chainloading two other external files (jQuery and a plugin), those files were cached and were not reloaded, thus not executed properly. To solve the issue, I added a query parameter with current timestamp to each of these files: `src="...jquery.js?t=1303381898"` to randomize the URL so that IE wont cache it. I also retained the no-cache headers for the original page itself. Thank you. – Laas Apr 21 '11 at 10:36
  • Interesting. I did something like that before to reload an image- though sending no cache headers should suffice. So are those scripts dynamic so that they shouldn't be cached? – KTF Apr 21 '11 at 11:53
  • The first script is dynamic (and so I can set no-cache headers for this script only). But this script includes other, static scripts, which IMHO should be cached, but for some reason IE misplaces them when they are (probably something to do with IE not caching dynamically generated content - i.e the ` – Laas Apr 21 '11 at 11:57
  • I understand. Well I'm glad a solution was discovered. Cheers! – KTF Apr 21 '11 at 13:06
0

You should look into using a history plugin to get consistent results with dynamic content.

Here is a thread with some plugins jquery history plugin

Community
  • 1
  • 1
Thomas Brasington
  • 588
  • 2
  • 7