The Safari Back Button Problem

Asked 23/8, 2008 at 6:43 Answered 27/8, 2021 at 6:45

I do some minor programming and web work for a local community college. Work that includes maintaining a very large and soul destroying website that consists of a hodge podge of VBScript, javascript, Dreamweaver generated cruft and a collection of add-ons that various conmen have convinced them to buy over the years.

A few days ago I got a call "The website is locking up for people using Safari!" Okay, step one download Safari(v3.1.2), step two surf to the site. Everything appears to work fine.

Long story short I finally isolated the problem and it relates to Safari's back button. The website uses a fancy-pants javascript menu that works in every browser I've tried including Safari, the first time around. But in Safari if you follow a link off the page and then hit the back button the menu no longer works.

I made a pared down webpage to illustrate the principle.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Safari Back Button Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="alert('Hello');">
<a href="http://www.codinghorror.com">Coding Horror</a>
</body>
</html>

Load the page and you see the alert box. Then follow the link off the page and hit the back button. In IE and Firefox you see the alert box again, in Safari you do not.

After a vigorous googling I've discovered others with similar problems but no really satisfactory answers. So my question is how can I make my pages work the same way in Safari after the user hits the back button as they do in other browsers?

If this is a stupid question please be gentle, javascript is somewhat new to me.

Mcgann answered 23/8, 2008 at 6:43 Comment(6)

Hey Auto, have you figured this out yet? I've tried all of the solutions below on iPads and iPods, and I can't get Safari to run the JavaScript when the client presses the back button. (I can get it when I try it with Safari on a desktop, but I can't get it to work with a mobile version of Safari. Is this something you worked with at all?) – Electrobiology 15/8, 2012 at 23:22

Check the answer on question Mobile Safari back button – Lighten 29/9, 2012 at 11:25

onload() event is not firing in Safari when back button is clicked – Arsonist 15/5, 2014 at 8:45

Sal I did figure this out eventually. I called my function with jquery's "document.ready" instead of "onload". – Mcgann 30/7, 2015 at 15:2

I found my answer here guwii.com/cache-issues-with-forwards-and-back-history-in-safari – Supersede 8/6, 2021 at 18:32

Just in case users run into this question still today: learn about bfcache (e.g. via this blog post) and see here how to hook in some code to tidy up the prior page state. – Symptomatology 31/7, 2021 at 22:13

Stefan's iframe solution works, but if that's not elegant enough, I find the following JavaScript also solves it:

window.onunload = function(){};

That is, if your menu is JavaScript, then you might prefer to solve this issue with JavaScript too.

The unload event handler definition idea came from this Firefox 1.5 article: https://developer.mozilla.org/en/Using_Firefox_1.5_caching.

Siclari answered 6/12, 2008 at 21:49 Comment(9)

I had problems with the back button in Safari even though I WAS using jQuery's $(document).ready event. I added the above code and it resolved the issue. – Clintclintock 1/2, 2011 at 16:27

Seems like this Q&A is still relevant. When considering browser quirks, one is inclined to think of IE only, but the 'others' (Webkit, Firefox) have them as well, albeit more minor and more elusive... – Ait 1/3, 2012 at 8:44

@Mika Tuupola: Safari is not only available on iOS. I don't see how the operating system has any part to play in Safari's behaviour, you must have a newer version of Safari too. I don't have any iOS devices, so shrug. – Siclari 29/9, 2012 at 19:7

@LeeKowalkowski the OS does have an effect on it - Safari for iOS does not work, while the OS X version does work! – Hawker 7/4, 2013 at 12:5

@Jesse: Then they're obviously different beasts! I think I'll delete this answer though. I can't really help people that don't see a problem using the onload event in the first place (hint: it's not a great event, and probably not what you think it is, i.e: it triggers too late) – Siclari 7/4, 2013 at 12:26

@LeeKowalkowski No need to delete it! You've got enough votes on it to merit the answer some value! Just specify that the provided fix has been known to only work on Firefox, but iOS Safari requires something different. – Hawker 7/4, 2013 at 12:35

Great! That solved my problem of Safari not firing onload() event when back button is clicked – Arsonist 15/5, 2014 at 8:43

In 2021 looks that is not working anymore. Any suggestion? – Cashbook 4/2, 2021 at 17:57

@AralRoca Yes. Check out about bfcache (e.g. via this blog post) and see here how to hook in some code to tidy up the prior page state. – Symptomatology 31/7, 2021 at 22:17

Just put this in body tag <body onunload="">

this will force safari, chrome, FF reload every time you hit Back button

Elvinelvina answered 1/5, 2011 at 4:33 Comment(1)

its fix my problem on Angular project with Safari and Firefox testing, thanks 👍 – Flunkey 26/8, 2021 at 10:19

Please do not follow any of the advice that tells you to ignore the cache. Pages are cached for a reason -- to improve user experience. The methods you're using will make user experience worse, so unless you hate your users, don't do that.

The correct solution for Safari (Desktop and iOS) is to use the pageshow event instead of the onload event (See https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching for what these are).

The pageshow event will fire at the same time you expect the onload event to fire, but it will also work when pages are served via the cache. This appears to be what you want anyway.

Boart answered 12/11, 2013 at 22:18 Comment(2)

Really? If js modified a page somehow, for example to indicate a spinner on a button that indicates process, and then new page loaded, then on back navigation you will see this spinner on the button. And that's not the way it should be – Annmarie 22/7, 2016 at 9:29

@SergeyP.akaazure that's why you use the pagehide event to stop the spinner. – Boart 22/7, 2016 at 13:23

Here is a good solution for Mobile Safari:

/*! Reloads page on every visit */
function Reload() {
    try {
        var headElement = document.getElementsByTagName("head")[0];
        if (headElement && headElement.innerHTML)
            headElement.innerHTML += " ";
        } catch (e) {}
    }

    /*! Reloads on every visit in mobile safari */
    if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
        window.onpageshow = function(evt) {
            if (evt.persisted) {
                document.body.style.display = "none";
                location.reload();
            }
        };
    }

(source)

I modified it to my needs, but as is it is okay. (annoying white screen on refresh if you dont modify it).

Carman answered 6/9, 2012 at 6:55 Comment(1)

Lone link is considered a poor answer since it is meaningless by itself and target resource is not guaranteed to be alive in the future. Please try to include at least summary of information you are linking to. – Elisabethelisabethville 6/9, 2012 at 7:17

An iframe solves the problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Safari Back Button Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="alert('Hello');">
<a href="http://www.codinghorror.com">Coding Horror</a>
<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this prevents back forward cache
</iframe>
</body>
</html>

more details

Long answered 23/8, 2008 at 7:36 Comment(1)

The link in this answer is now broken; you can find the details archived here. – Beacham 21/1, 2011 at 2:40

$(window).bind("pageshow", function(event) {
  if (event.originalEvent.persisted) {
    window.location.reload() 
  }
});

Answered more recently here by mshah.

Ledbetter answered 21/4, 2016 at 14:58 Comment(0)

I have no idea what's causing the problem but I know who might be able to help you. Safari is built on Webkit and short of Apple (who are not so community minded) the Webkit team might know what the issue is.

It's not a stupid question at all.

Wineskin answered 23/8, 2008 at 6:50 Comment(0)

I've noticed something very similar. I think it is because Firefox and IE, when going back, are retrieving the page from the server again and Safari is not. Have you tried adding a page expiry/no cache header? I was going to look into it when I discovered the behaviour but haven't had time yet.

Catachresis answered 23/8, 2008 at 7:5 Comment(0)

I know this thread is a year old, but I just fixed an identical Safari-only problem using ProjectSeven's Safari backbutton fix. Works like a charm.

http://www.projectseven.com/extensions/info/safaribbfix/index.htm

Leveller answered 27/5, 2010 at 21:23 Comment(1)

Its funny because ProjectSeven was the javascript menu I was talking about. Eventually ditched it for a homemade jquery one. Moving from onload in the body tag to jquery's document.ready solved the issue for me. – Mcgann 1/6, 2010 at 21:0

Had the same problem on iPad.

Not that beautiful but it works :). How it works.

I realised that on iPad Safari, the page was not reloaded when the back button was pressed. I put a counter every second on the page and I save the current timestamp.

When the page is loaded the counter and time are synchronized. On back button, counter continue where it stopped and there is a gap between timestamp and counter. If the gap is grater than 500ms, force reload the page.

In the file action.js

var showLoadingBoxSetIntervalVar;
var showLoadingBoxCount = 0;
var showLoadingBoxLoadedTimestamp = 0

function showLoadingBox(text) {

    var showLoadingBoxSetIntervalVar=self.setInterval(function(){showLoadingBoxIpadRelaod()},1000);
    showLoadingBoxCount = 0
    showLoadingBoxLoadedTimestamp = new Date().getTime();

    //Here load the spinner

}

function showLoadingBoxIpadRelaod()
{
    //Calculate difference between now and page loaded time minus threshold 500ms
    var diffTime = ( (new Date().getTime()) - showLoadingBoxLoadedTimestamp - 500)/1000;

    showLoadingBoxCount = showLoadingBoxCount + 1;
    var isiPad = navigator.userAgent.match(/iPad/i) != null;

    if(diffTime > showLoadingBoxCount && isiPad){
        location.reload();
    }
}

Okwu answered 10/6, 2013 at 12:12 Comment(0)

Try this
if(performance.navigation.type == 2) {
alert("Hello");
}

Darius answered 9/1, 2020 at 13:2 Comment(1)

While this might be a valuable hint to solve the problem, a good answer also demonstrates the solution. Please EDIT to provide example code to show what you mean. Alternatively, consider writing this as a comment instead – Aim 9/1, 2020 at 13:21

In my Angular application I used this condition to fix the problem. First I added onunload="" event handle to index.html lilke below

<body class="mat-typography" onunload="">
    <app-root></app-root>
</body>

then in my component ngOnInit method I added that code like below

  public ngOnInit(): void {
    window.onpageshow = (event) => {
        if (event.persisted) {
            document.body.style.display = "none";
            location.reload();
        }
    };
    ...
  }

Egerton answered 27/8, 2021 at 6:45 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags