Geek Answers Handbook

JavaScript source code does not execute when using Firefox back button

This website has a bizarre effect: when you click on the navigation link, the content disappears and when a new page (at a different URL) loads, its content disappears.

Interestingly, after users click the back button of their browsers, they return to the previous page and the content still disappears in . In other words, the previous page does not remain in a fading state, which was the last. According to this comment , the page should remain in the last state.

I tried many ways to reproduce this effect, but on my tests, after clicking the "Back" button, the previous page still shows nothing (the content remains in a state of disappearance). Sometimes this works on some browsers, but not on others. Sometimes this works, but then it does not open after reopening the browser.

How does a website realize this effect, which even works after users use the back button to go to the previous page?


=== EDIT 1 ===

Here are my test pages .


=== EDIT 2 ===

The above test pages were tested using Firefox on three different computers and Firefox from version 4 to version 20 through the cross-browser testing online service. And the results are the same: not working.

+4
source share
3 answers

You need a very simple workaround: connect to the window.unload event and the specific condition to reload the page inside window.onpageshow !

Firefox fix

JQuery

 $(window).unload(function () { $(window).unbind('unload'); });

JavaScript:

 function UnloadHandler() { window.removeEventListener('unload', UnloadHandler, false); } window.addEventListener('unload', UnloadHandler, false);

Fix Safari iOS

JQuery

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

JavaScript:

 window.addEventListener('pageshow', function (event) { if (event.persisted) { window.location.reload() } }, false);

Working example

Since I do not have access to update your page, I downloaded it here .

Why does Firefox need window.onunload ? MDN window.unload says:

Using this event handler on your page prevents Firefox 1.5 from caching the page in bfcache in memory. See Using Firefox 1.5 Caching for more information.

Some users may not want to disable Firefox bfcache [see the page caching section , despite the unloading and loading before loading ), which is why the Firefox patch above onunload event inside the onunload event.

Why does Safari need window.onpageshow ? There seems to be no way to disable Safari "bfcache", and we need to refresh the page when it is shown.

PS. bfcache means writeback / forward cache.

Full HTML / JavaScript for reference:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div> <a href="fadingpage.html?p=1">Page 1</a> <a href="fadingpage.html?p=2">Page 2</a> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet imperdiet diam, in sodales velit porta eget. Ut tellus urna, vestibulum vel facilisis eu, blandit sed est. Sed tortor justo, interdum vel iaculis eu, semper ut libero. Morbi porttitor sem eget dolor eleifend fermentum. Mauris lacinia dictum lacus ut pharetra. Proin lacus felis, vestibulum sit amet malesuada id, pretium at lorem. Duis elementum sapien vitae nibh consequat tincidunt. Proin gravida rhoncus metus sed feugiat. Sed ultricies tellus et augue adipiscing dictum. In vitae tellus eget sapien fringilla tincidunt. Vestibulum gravida, velit quis mattis elementum, lacus felis vestibulum neque, et commodo quam orci quis odio. Nunc varius viverra metus, eu dictum massa venenatis vel. Cras suscipit, orci a gravida pretium, erat massa facilisis turpis, quis sodales sem metus vitae ligula. Nunc interdum augue vel arcu vulputate quis aliquet nulla vehicula. Suspendisse eros odio, ultrices hendrerit euismod nec, condimentum sed metus.</p> <p>Donec at dolor et arcu aliquam tincidunt. Nulla eu elit sit amet leo facilisis posuere. Etiam non elit ac elit ornare elementum a vitae felis. Aenean semper nunc urna. Ut et interdum mi. Duis mollis est eu leo gravida vitae adipiscing leo commodo. Ut scelerisque cursus nulla, nec bibendum elit molestie sed. Nulla facilisi. Proin neque arcu, aliquam sed sagittis non, ultrices in enim. Fusce vitae nunc neque, ut sodales magna. Proin aliquam lobortis augue sed aliquet. Maecenas sit amet pellentesque mauris. Donec luctus purus hendrerit nisl pharetra eleifend. Mauris a lectus mi. In elit dui, porta a venenatis vel, consectetur id magna. Quisque vehicula leo vel nulla convallis quis sollicitudin sem fringilla.</p> <p>Morbi nec mi odio, eget porttitor nisi. Duis luctus blandit lacus. Donec quis sagittis mi. Maecenas id nisl enim. Aliquam erat volutpat. Nulla facilisi. Donec ac velit diam, interdum rutrum mauris. Nullam at odio eget felis tempus elementum. Nam a augue nibh, sed bibendum massa. Vivamus eget sollicitudin mauris. Pellentesque dapibus quam nec ligula blandit scelerisque. In vulputate mauris vel dolor interdum vitae aliquet nisl convallis. In massa mi, consectetur id malesuada at, suscipit vitae libero. Sed a ligula erat.</p> </div> <script type="text/javascript"> $(function() { $('body').hide().fadeIn(800); $('a').click(function() { var href = $(this).attr('href'); $('body').fadeOut(800, function() { window.location = href; }); return false; }); }); // Firefox fix $(window).unload(function () { $(window).unbind('unload'); }); // iOS Safari fix $(window).bind('pageshow', function(event) { if (event.originalEvent.persisted) { window.location.reload() } }); </script> </body> </html>
+16
source

For everyone who works with problems with Rails , and this - your problem is not bfcache - this is the gem of turbolinks . Here 's how to remove it.

+4
source

This may not be exactly what you are asking for, but they bring effect in this way: the contents of the page begin to hide. This is always the case even when you click the back button because hidden content is declared in style or class in markup. Then there is javascript code that fadeIn the contents after the event:

 $('#content').fadeIn(800);
0
source

More articles:


All Articles