<p>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. </p>

<p>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.</p>

<p>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.</p>

<p>I made a pared down webpage to illustrate the principle.</p>

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

<p>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.</p>

<p>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?</p>

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

[{'answer_id': 24049, 'author': 'Teifion', 'author_id': 1384652, 'author_profile': 'https://Stackoverflow.com/users/1384652', 'pm_score': 2, 'selected': False, 'text': '<p>I have no idea what\'s causing the problem but I know who might be able to help you. Safari is built on <a href="http://webkit.org/" rel="nofollow noreferrer">Webkit</a> and short of Apple (who are not so community minded) the <a href="http://webkit.org/contact.html" rel="nofollow noreferrer">Webkit team</a> might know what the issue is.</p>\n\n<p>It\'s not a stupid question at all.</p>\n'}, {'answer_id': 24053, 'author': 'Stacey Richards', 'author_id': 1142, 'author_profile': 'https://Stackoverflow.com/users/1142', 'pm_score': 2, 'selected': False, 'text': "<p>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.</p>\n"}, {'answer_id': 24059, 'author': 'Stefan Ladwig', 'author_id': 2585, 'author_profile': 'https://Stackoverflow.com/users/2585', 'pm_score': 3, 'selected': False, 'text': '<p>An iframe solves the problem:</p>\n\n<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;\n&lt;html&gt;\n&lt;head&gt;&lt;title&gt;Safari Back Button Test&lt;/title&gt;\n&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;\n&lt;/head&gt;\n&lt;body onload="alert(\'Hello\');"&gt;\n&lt;a href="http://www.codinghorror.com"&gt;Coding Horror&lt;/a&gt;\n&lt;iframe style="height:0px;width:0px;visibility:hidden" src="about:blank"&gt;\nthis prevents back forward cache\n&lt;/iframe&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n\n<p>more <a href="http://developer.apple.com/internet/safari/faq.html#anchor5" rel="noreferrer">details</a></p>\n'}, {'answer_id': 346841, 'author': 'Lee Kowalkowski', 'author_id': 30945, 'author_profile': 'https://Stackoverflow.com/users/30945', 'pm_score': 4, 'selected': False, 'text': '<p>Stefan\'s iframe solution works, but if that\'s not elegant enough, I find the following JavaScript also solves it:</p>\n\n<pre><code>window.onunload = function(){};\n</code></pre>\n\n<p>That is, if your menu is JavaScript, then you might prefer to solve this issue with JavaScript too.</p>\n\n<p>The unload event handler definition idea came from this Firefox 1.5 article: <a href="https://developer.mozilla.org/en/Using_Firefox_1.5_caching" rel="noreferrer">https://developer.mozilla.org/en/Using_Firefox_1.5_caching</a>.</p>\n'}, {'answer_id': 2925056, 'author': 'brunam', 'author_id': 142363, 'author_profile': 'https://Stackoverflow.com/users/142363', 'pm_score': 1, 'selected': False, 'text': '<p>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.</p>\n\n<p><a href="http://www.projectseven.com/extensions/info/safaribbfix/index.htm" rel="nofollow noreferrer">http://www.projectseven.com/extensions/info/safaribbfix/index.htm</a></p>\n'}, {'answer_id': 5846452, 'author': 'Manuel Pardo', 'author_id': 733011, 'author_profile': 'https://Stackoverflow.com/users/733011', 'pm_score': 3, 'selected': False, 'text': '<p>Just put this in body tag\n<code>&lt;body onunload=""&gt;</code></p>\n\n<p>this will force safari, chrome, FF reload every time you hit Back button</p>\n'}, {'answer_id': 12294511, 'author': 'Gary Hayes', 'author_id': 1615776, 'author_profile': 'https://Stackoverflow.com/users/1615776', 'pm_score': 3, 'selected': False, 'text': '<p>Here is a good solution for Mobile Safari:</p>\n\n<pre><code>/*! Reloads page on every visit */\nfunction Reload() {\n    try {\n        var headElement = document.getElementsByTagName("head")[0];\n        if (headElement &amp;&amp; headElement.innerHTML)\n            headElement.innerHTML += " ";\n        } catch (e) {}\n    }\n\n    /*! Reloads on every visit in mobile safari */\n    if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {\n        window.onpageshow = function(evt) {\n            if (evt.persisted) {\n                document.body.style.display = "none";\n                location.reload();\n            }\n        };\n    }\n</code></pre>\n\n<p>(<a href="https://coderwall.com/p/ndecha">source</a>)</p>\n\n<p>I modified it to my needs, but as is it is okay. (annoying white screen on refresh if you dont modify it).</p>\n'}, {'answer_id': 17023561, 'author': 'ArnaudBB', 'author_id': 2470769, 'author_profile': 'https://Stackoverflow.com/users/2470769', 'pm_score': 0, 'selected': False, 'text': '<p>Had the same problem on iPad.</p>\n\n<p>Not that beautiful but it works :). How it works.</p>\n\n<p>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.</p>\n\n<p>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.</p>\n\n<p>In the file action.js</p>\n\n<pre><code>var showLoadingBoxSetIntervalVar;\nvar showLoadingBoxCount = 0;\nvar showLoadingBoxLoadedTimestamp = 0\n\nfunction showLoadingBox(text) {\n\n    var showLoadingBoxSetIntervalVar=self.setInterval(function(){showLoadingBoxIpadRelaod()},1000);\n    showLoadingBoxCount = 0\n    showLoadingBoxLoadedTimestamp = new Date().getTime();\n\n    //Here load the spinner\n\n}\n\nfunction showLoadingBoxIpadRelaod()\n{\n    //Calculate difference between now and page loaded time minus threshold 500ms\n    var diffTime = ( (new Date().getTime()) - showLoadingBoxLoadedTimestamp - 500)/1000;\n\n    showLoadingBoxCount = showLoadingBoxCount + 1;\n    var isiPad = navigator.userAgent.match(/iPad/i) != null;\n\n    if(diffTime &gt; showLoadingBoxCount &amp;&amp; isiPad){\n        location.reload();\n    }\n}\n</code></pre>\n'}, {'answer_id': 19941107, 'author': 'bluesmoon', 'author_id': 76392, 'author_profile': 'https://Stackoverflow.com/users/76392', 'pm_score': 3, 'selected': False, 'text': '<p>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.</p>\n\n<p>The correct solution for Safari (Desktop and iOS) is to use the <code>pageshow</code> event instead of the <code>onload</code> event (See <a href="https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching</a> for what these are).</p>\n\n<p>The <code>pageshow</code> event will fire at the same time you expect the <code>onload</code> event to fire, but it will also work when pages are served via the cache.  This appears to be what you want anyway.</p>\n'}, {'answer_id': 36773400, 'author': 'ztech', 'author_id': 1789517, 'author_profile': 'https://Stackoverflow.com/users/1789517', 'pm_score': 2, 'selected': False, 'text': '<pre><code>$(window).bind("pageshow", function(event) {\n  if (event.originalEvent.persisted) {\n    window.location.reload() \n  }\n});\n</code></pre>\n\n<p>Answered more recently <a href="https://stackoverflow.com/questions/36750707/fire-jquery-javascript-after-back-button-in-safari-9/36751871#36751871">here</a> by <a href="https://stackoverflow.com/users/3822374/mshah" title="mshah">mshah</a>.</p>\n'}, {'answer_id': 59664601, 'author': 'Alok Kumar Kasgar', 'author_id': 6275054, 'author_profile': 'https://Stackoverflow.com/users/6275054', 'pm_score': 0, 'selected': False, 'text': '<p><strong>Try this</strong><br>\n    if(performance.navigation.type == 2) {<br>\n      alert("Hello");<br>\n}  </p>\n'}, {'answer_id': 68949055, 'author': 'Samet ÇELİKBIÇAK', 'author_id': 10509056, 'author_profile': 'https://Stackoverflow.com/users/10509056', 'pm_score': 0, 'selected': False, 'text': '<p>In my Angular application I used this condition to fix the problem. First I added <code><strong>onunload=&quot;&quot;</strong></code> event handle to <code>index.html</code> lilke below</p>\n<pre><code>&lt;body class=&quot;mat-typography&quot; onunload=&quot;&quot;&gt;\n    &lt;app-root&gt;&lt;/app-root&gt;\n&lt;/body&gt;\n</code></pre>\n<p>then in my component <code><strong>ngOnInit</strong></code> method I added that code like below</p>\n<pre><code>  public ngOnInit(): void {\n    window.onpageshow = (event) =&gt; {\n        if (event.persisted) {\n            document.body.style.display = &quot;none&quot;;\n            location.reload();\n        }\n    };\n    ...\n  }\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/24046', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2051/']