CODEWITHSUNDEEP
javascripthtmlfirefoxcaching
Lance Pollard
Lance Pollard

Reputation: 79178

Force Firefox to Reload Page on Back Button

How do you make Firefox rerun javascript and reload the entire page when the user presses the back button? I was able to do this in all browsers except Firefox from the help of another SO question by adding this code:

history.navigationMode = 'compatible';
$("body").unload(function(){})

And also adding an iFrame... But this doesn't work in Firefox. Is there anything to do?

Upvotes: 21

Views: 24510

Answers (8)

khan
khan

Reputation: 1150

Add this to you file. Clean your cache first before testing.

<?php
 header("Cache-Control: private, no-store, max-age=0, no-cache, must-revalidate, post-check=0, pre-check=0");
 header("Pragma: no-cache");
 header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
?>

to add headers in javascript please read this.

https://developer.mozilla.org/en-US/docs/Web/API/Headers/append

Upvotes: 1

Yngvar Kristiansen
Yngvar Kristiansen

Reputation: 1462

This solution worked for me (and I believe is a bit simpler than other solutions suggested):

    $(window).bind('pageshow', function() {
        // This event is called only by FireFox. Because Firefox doesn't reload the page when the user uses the back button,
        // or when we call history.go.back(), we need to force the reload for the applicatino to work similar to Chrome and IE (11 at least).

        // Doc: https://developer.mozilla.org/en-US/docs/Listening_to_events_in_Firefox_extensions
        location.reload();
    });

I call this code on every page load, if the browser is FireFox. (To find out if the currently running browser is Firefox, see here).

Upvotes: 5

Pseudyx
Pseudyx

Reputation: 81

If your using c# .Net, you can handle it on the page load or init event programmatically

Response.Cache.SetExpires(DateTime.Now.AddSeconds(-1));
Response.Cache.SetCacheability(HttpCacheability.Public);
Response.Cache.SetValidUntilExpires(false);
Response.Cache.VaryByParams["*"] = true;

For more info, check out Response.Cache at MSDN: http://msdn.microsoft.com/en-us/library/system.web.httpresponse.cache(v=vs.110).aspx

Upvotes: 0

Aaron Gustafson
Aaron Gustafson

Reputation: 612

I think the answer you might want is here: https://stackoverflow.com/a/5493543/1475148

TLDR: HTTPS + Cache-Control: must-revalidate as a server-sent header + Expires header set in the past should make it work. Here’s a sample PHP implementation:

<?php

$expires = gmdate( 'D, d M Y H:i:s', time() - 1 );

header( 'Cache-Control: must-revalidate' );
header( "Expires: {$expires} GMT" );

?>
<!DOCTYPE html>
<html>
    <head>
        <title>Auto-reloading page</title>
    </head>
    <body>
        <p>The current day is <?php echo date( 'd, F Y'); ?> and the time is <?php echo date('H:i:s'); ?>.</p>
        <p><a href="http://google.com">Click away</a></p>
    </body>
</html>

Upvotes: 0

Fabio Montefuscolo
Fabio Montefuscolo

Reputation: 2528

In my case, after the final user Post his new data to server, he is redirected to another page. But when the final user press the back button, the form is pre-populated with the old data. So, reload page is needed.

I did a workaround for Firefox and another for Google Chrome. They have different behavior to show cached pages.

Doing this will prevent Firefox to cache the page and the back button will bring the page from server.

window.onunload = function(){};

But Google Chrome do it in another way and the solution above did not work for me. So I did another workaround for Chrome. I did a flag that mark the form as dirty.

At the top of <head>, before load anything, I check the cookie

if(document.cookie.match(/my-form=dirty/)) {
  document.cookie = "my-form=; expires=-1; path="+document.location.pathname;
  window.location.reload();
}

With a help of jQuery, I write the cookie when user modify something

$(document).load(function(){
  $(':input').change(function(){
    document.cookie = "my-form=dirty; expires=86400000; path="+document.location.pathname;
  })
})

Good to know:

Upvotes: 9

Marcin Junger
Marcin Junger

Reputation: 1

None of this worked for me. I do it via cookies checking - I import jsp (source below) in head part of page, and then I call refreshOnBack in .

<%@ page import="java.util.UUID" %>
<script>
    var REFRESH_PAGE_COOKIE_NAME="refreshPage_";
    var PAGE_REFRESH_GUID = "<%out.print(UUID.randomUUID().toString());%>";  
    /* To force refresh of page when user or javascript clicks "back",
     * put call to this method in body onload function - NOT THROUGH JQUERY 
     * as jquery onload is not called on history back.
     * In must be done via <BODY onload="...">
     */
    function refreshOnBack(){
        //Alghoritm uses cookies to check if page was already loaded.
        //Cookies expiration time is not set - will be gone after browser restart.
        //Alghoritm:
        //is cookie set? 
        // -YES - reload;
        // -NO - set it up;
        //Cookie contains unique guid in name so that when page is regenerated - it will not reload.
        var cookieName = REFRESH_PAGE_COOKIE_NAME + PAGE_REFRESH_GUID; 
        if(getCookie(cookieName)=="Y"){
            window.location.reload();
        } else {
            setCookie(cookieName,"Y");
        }
    }   
</script>

Upvotes: 0

brothercake
brothercake

Reputation: 51

For reference, that navigationMode property only applies to Opera, it's just that IE and the Webkit browsers already have the behavior the questioner wanted.

IE and Webkit do what Opera would call "compatible" navigation. Firefox does what Opera would call "fast" navigation. But it's only in Opera that this behavior is actually controllable.

Upvotes: 3

jknair
jknair

Reputation: 4764

add this between your HEAD tags

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

Upvotes: 9

Related Questions