Preventing the browser from reloading the page when a user hits Back - html

I seem to have the opposite problem from most SO users. I have a static page that changes rarely, and I want the browser not to reload that page when the user navigates back to it quickly. I have not been able to find any simple list of rules that detail when a browser reloads on back-navigation, and when it does not.
If it makes a difference, my URL has a query string, and is served using the https:// protocol.

You don't need to know if the back button has been used. Just tell the browser to cache your page by using cache control headers. You will see lots of examples from Google - http cache control headers
Specifically, look at these meta tags:
<meta http-equiv="CACHE-CONTROL" content="..." />
<meta http-equiv="EXPIRES" content="..." />
Edit:
Here is a link to one of the results from that Google search. I think it gives a pretty good explanation of how these headers work. Increasing Application Performance with HTTP Cache Headers
With these headers you can specify how long to cache your pages; 10 minutes, 30 minutes, hours, days, etc.

Have you tried onpageshow event of the body tag ?
<script type="text/javascript">
function caller()
{
return false;
}
</script>
</head>
<body onpageshow="caller();">
</body>
Works on most cases.

Related

.html Caching in HTML

I have a web application published on IIS. All of my JS files are called from my static html file called "Index.html". In that html file, I call each JS file with the <script> tag, and in order to manage our versions and perform updates without user's history and cache deleting, I've added the ?v={version} at the end of each JS file's URL as the following:
<script src="./app.js?v=20161226.1" />
After multiple version updates, I've noticed that the users still need to refresh the page in order to get the latest Index.html file. After searching the Developer Tools of chrome, and looking in the Network section in the Developer Tools, I've managed to notice that the Index.html file is loaded from the cache (shown the "(from cache)" sign in the Network).
After searching the web for any solution for uncaching .html files (Because there is no ?v={version} for my .html file), I've found that adding:
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
isn't solving the issue and the my Index.html file is still loaded from the cache.
I'm updaing my web application each two weeks and I can't afford myself letting the users deleting the cache and history each version update because the new and latest .html file is loaded because it is cached.
The only thing that helps is refreshing (F5) and then the Index.html file is reloaded (Not loaded from cache and the latest version of that Index.html file is shown). But if someone types the url and enters it in the URL-bar, the Index.html is still loaded from the cache.
Is there anything I've done wrong and should add anything else?
Is there anything to do to solve this issue at all?
Thanks!
Putting a query string on the end of a URL is a (good) hack to allow you to set the HTTP cache control headers to cache for a long time for infrequently changed resources and still force the new version to load on those occasions that you do change it.
If you are frequently updating your HTML, then just set the cache control headers to tell the browser to check for updates more frequently. Take advantage of Etags or If-Modified-Since instead of depending on an Expires header set far in the future.
NB: You have to use real HTTP headers. <meta http-equiv> is a bad joke.

HTTP header "expires" does not render the page from cache

I'm not really familiar with all the meta allowing you to manage the cache client-side so i tried to make a simple example with the HTTP header "expires"
With the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="expires" content="mon, 18 Jul 2016 1:00:00 GMT" />
<title>MY TITLE</title>
</head>
<body>
MY BODY
</body>
</html>
When i load the page for the first time (cache cleared before). the page is saved in the cache but when i update my body with "MY BODY2" and reload the page, the page displays "MY BODY 2". The browser was supposed to take the page from cache (with "MY BODY") since the expiration is in july 2016, no ?
Thank you for helping me to put some light on this problem
It depends how you reload the page.
You've basically three options:
Browse to another page and then back. This should use the cache.
Press F5 or reload but. This is an explicit reload so will check with the server if there's a new version - even if it's cached - and download it if there's a newer version.
Force reload (Ctrl+F5 in some browsers). This says ignore the cache and download from scratch (even if the cached version appears to be the same as what server will send you).
I suspect you've done option 2 and didn't realise this would check with the server and assumed it would use the cache if still valid. The reason it actually checks with the server is that a reload is often done when the user suspects the content has changed, or wants to re-download it (e.g. If page didn't render properly).
Also it should be noted that meta headers in HTML are not as good as http response headers set up by the server for various reasons including browser support reasons.
And finally it's worth opening developer tools (F12 in Chrome for example) and checking network tab to see what's going on but in that case make sure you don't have "Disable cache" ticked when it's open (it's ticked by default in Chrome as most developers don't want to use a cache when developing).

Why does Chrome not redirect using meta refresh

An application that I work with has a PL/SQL package that creates a page and uses a function to create META tags.
It creates a webpage with a META tag exactly like this :
<META HTTP-EQUIV="Refresh" NAME="Refresh" CONTENT="1; URL=PaymentSubmit.html">
The problem is that Chrome does not like the NAME="Refresh" attribute. It does not redirect the page, although it does redirect properly in IE and Firefox
If I remove the NAME attribute, so that it looks like this it works in all browsers :
<META HTTP-EQUIV="Refresh" CONTENT="1; URL=PaymentSubmit.html">
What's going on here? I can't find a W3C standard for META redirect, so does every browser make up it's own rules ? I'm not sure if it ever worked in Chrome, but since I never heard any bug reports I assume it used to work in Chrome.
Anyone have a similar problem ?
Thanks
If you check the w3c wiki you can find the following quote:
Exactly one of the name, http-equiv, and charset attributes must be specified.
It mean's it is not valid html that both - name and http-equiv attributes are set.
Read this W3C's HTML and XHTML Techniques test on meta refresh:
Find all meta elements in the document. For each meta element, check
if it contains the attribute http-equiv with value "refresh"
(case-insensitive) and the content attribute with a number greater
than 0 followed by ;'URL=anyURL' (where anyURL stands for the URI that
should replace the current page).
The behavouir of the other browsers is not wrong, but chrome is more strict.
More details about the correct behavouir - and the valid reference - are available at http://www.w3.org/TR/html5/document-metadata.html#attr-meta-http-equiv-refresh
As far as browser support:
The support for <meta> refresh is there even in IE6
The syntax to be used is:
Place inside <head> to refresh page after 5 seconds:
<meta http-equiv="refresh" content="5">
Redirect to http://example.com/ after 5 seconds:
<meta http-equiv="refresh" content="5; url=http://example.com/">
Redirect to http://example.com/ immediately:
<meta http-equiv="refresh" content="0; url=http://example.com/">
If you plan to support javascript disablers (Which I don't think you should do :)
Do this:<noscript><meta http-equiv="refresh" content="0; url=url here"></noscript>
It is not a part of HTTP standard.
However, there are alternatives:
For refreshing the page after 5 seconds, do the below:
<body onload="javascript:setTimeout(function(){ location.reload(); },5000);">
If you want to redirect after 5 seconds, then do the below:
<body onload="javascript:setTimeout(function(){ window.location = 'http://example.com';},5000);">
If you want to redirect immediately:
<body onload="javascript:window.location='http://example.com'">
But there isn't any alternative for javascript disablers (yippee!!)
Conclusion:
So, my suggestion, would be to use my javascript alternatives, because they are not going to be replaced.
But <meta> refresh tag may be discontinued in the coming years.
More reading : http://en.wikipedia.org/wiki/Meta_refresh
For the <META tags, Microsoft has published specific guidelines:
Page and site guidelines for SEO
Specifically, for the <meta http-equiv="refresh"> element, Microsoft states the following:
A page redirect should provide both a message with the new page location and sufficient time for users to read the message. A page redirect with a time-out period of less than five seconds may result in a lower search-engine ranking.
To redirect a page, consider using an HTTP redirect instead. An HTTP redirect is more likely to transfer the authority of the old page to the new page.
Personally, instead of a <meta refresh tag, I would recommend you use a 301 Redirect. In PHP you could do, for example, the following:
<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: http://www.yourdomain.com/newpage");
?>
This method is better than the <meta refresh because usually a 301 redirect includes the address to which the resource has been moved. Web browsers will typically follow 301 redirects to the new location automatically, without the need for user action.
According to some definitions of 301 Redirect, it would even preserve old positions:
A 301 redirect should be used whenever a website is moved to a new domain name (URL) so that search engines will quickly change their indeces and, in theory, preserve the search engine rankings that the site had at the previous domain.
All this is in line with the fact that many shady websites use <meta refresh to open unwanted websites (spam/ advertisements etc.). Hence I would conclude that the refresh meta tag should not be used.
For the other meta tags, please read the following: 18 meta tags every webpage should have.
Keep in mind that not all meta tags are of crucial importance; for example, Google says it does not use the keywords meta tag in web ranking.
But remember: it is Better to have, and not need, than to need, and not have.
Just don't use the <META refresh ;)

Forcing users to grab new site content, not use cache

We just rolled out a completely new website, with a lot of the old images gone. We have been swamped by called from clients this morning because they can't get access to the sites content because they are still using cache on the page. Is there a way using the meta tags or something that will force them not to use the cache content? This will just be temporary for a week, then we will remove it, just so our users have the latest site up. Thanks.
Why not change the HTML source to show a different URL to the images and resources so the browser is forced to download a new version. This technique is used a lot to invalidate the browsers cache. Here is an example:
<img src="/logo.jpg?version=1">
<link rel="stylesheet" type="text/css" href="/style.css?version=1">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
Indicates cached information should not be used and instead requests should be forwarded to the origin server.

SEO consequences of redirecting with META REFRESH

Question: What are the SEO consequences of redirecting web traffic with a META REFRESH?
Details: I'm working with an old static site that's migrating to a new address. I'm redirecting traffic to the new site using meta refreshes on all static pages, like this:
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.newsite.com/">
Of course, I'd rather write the redirects directly into an Apache file (or an .htaccess file), but due to some server weirdness that's beyond my control, I'm stuck with the meta refreshes.
So I'm wondering what the consequences are here? Will the site's search ranking be affected? Will the new site be indexed? I've read that Google (et al.) will treat the refresh as a proper 301 redirect as long as it's set to 0 seconds (anything longer will be deemed spam). How will analytics be affected?
What's the true behavior here? Any thoughts?
It's not ideal, but apparently it's ok:
http://sebastians-pamphlets.com/google-and-yahoo-treat-undelayed-meta-refresh-as-301-redirect/
Also read number 2 on this page:
http://www.seomoz.org/blog/answers-to-the-seo-professionals-litmus-test
as i can not comment on the fact, if a 0sec meta refresh is treated as a 301 redirect, i would just go with the way google recommends.
see http://www.google.com/support/webmasters/bin/answer.py?answer=139394
from http://www.oldsite.com/
<head>
...
<link rel="canonical" href="http://www.newsite.com/" />
...
</head>
from http://www.newsite.com/awesomepage.html
<head>
...
<link rel="canonical" href="http://www.newsite.com/awesomepage" />
...
</head>
and so on.
cross domain canonicals are basically treated like HTTP 301 for googlebot. whatever you do with the user (i.e.: meta refresh, or just leave him/her on the old page) is optional (as long as it is not missleading).