No-Javascript Detection Script + Redirect
I would like to write a script that detects whether the user has javascript disabled, and if yes, redirect them to another page (let's say mysite.com/enablejavascript)
However, I have no idea where to start! Thanks SO.
Gdoron mentioned noscript already. Together with meta refresh¹ you can redirect users if they have JavaScript disabled.
A JavaScript redirect can be done with location.replace(URL)
.
<head>
<noscript>
<meta http-equiv="refresh" content="0; url=http://example.com/without-js" />
</noscript>
<script>
location.replace('http://example.com/with-js');
</script>
</head>
Example of noscript+meta refresh: http://pastehtml.com/view/bsrxxl7cw.html
1) Mind the drawbacks section of the Wikipedia article!
Meta refresh tags have some drawbacks:
- If a page redirects too quickly (less than 2-3 seconds), using the "Back" button on the next page may cause some browsers to move back to the redirecting page, whereupon the redirect will occur again. This is bad for usability, as this may cause a reader to be "stuck" on the last website.
- A reader may or may not want to be redirected to a different page, which can lead to user dissatisfaction or raise concerns about security.
How do you want to write a script when java-script is disabled... ?
It's can not be done. You can show a message when javascript is disabled with <noscript>
.
<noscript>
tag on MDN:
The HTML NoScript Element () defines a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
You should combine HTML redirect in a noscript element. I found this JavaScript redirection generator. Here is your sample code:
<!-- Pleace this snippet right after opening the head tag to make it work properly -->
<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->
<!-- REDIRECTING STARTS -->
<link rel="canonical" href="https://yourdomain.com/"/>
<noscript>
<meta http-equiv="refresh" content="0;URL=https://yourdomain.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
var url = "https://yourdomain.com/";
if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
{
document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
}
else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->