Introduction
If you’ve ever built a website from scratch, you know that each page on your site is valuable. Increasing viewership is essential to the success of any website, but it’s no secret that most websites will eventually need to redirect viewers to outside sources at some point.
However, there’s no reason why you can’t captivate your viewers one more time before they leave; when you need to redirect your users away from your site, the best way to do it is with a custom redirect page.
DISCLAIMER: Implementing a redirect page such as this may cause you to reach the maximum number of daily hits on your site faster than you normally would. If you are concerned that your site will receive too many daily views, consider steering away from this solution and simply redirecting users as normal.
If you still want to implement this solution and are concerned about your daily hits, consider upgrading to a Hostinger premium plan where the daily hits are unlimited.
Final Code:
The following is the final code for the redirect. After adding it to your page, you can initiate a redirect like so:
https://yourdomain.com/redirect.html?https://newsite.com
<script>
setTimeout(function() { // sets time to redirect to 5 seconds
if (window.location.search.indexOf('?') !== -1) { // checks for query in address bar
if (window.location.search.indexOf('https://') !== -1) { // checks for https:// protocol in query
var query = window.location.search; // gets query from address bar
var target = query.replace("?", ""); // removes "?" from query
window.location.href = target; // sends user to target
} else if (window.location.search.indexOf('http://') !== -1) { // checks for http:// protocol in query
var query = window.location.search; // gets query from address bar
var target = query.replace("?", ""); // removes "?" from query
window.location.href = target; // sends user to target
} else { // if no protocol is declared
var query = window.location.search; // gets query from address bar
var target = query.replace("?", ""); // removes "?" from query
window.location.href = "http://" + target; // sends user to http://[target] in case target does not support SSL
}
} else { // if no query
window.location.href = "https://yourdomain.com" // sends user back to homepage
};
}, 5000);
</script>
The following is a full page, including the redirect, with no styling or other content. This can be used as a starting page or as the full page, since styling is not absolutely necessary.
<html>
<head>
<title>Redirect</title>
</head>
<body>
<h1>Redirect</h1>
<p>Please wait while you are redirected.</p>
<script>
setTimeout(function() { // sets time to redirect to 5 seconds
if (window.location.search.indexOf('?') !== -1) { // checks for query in address bar
if (window.location.search.indexOf('https://') !== -1) { // checks for https:// protocol in query
var query = window.location.search; // gets query from address bar
var target = query.replace("?", ""); // removes "?" from query
window.location.href = target; // sends user to target
} else if (window.location.search.indexOf('http://') !== -1) { // checks for http:// protocol in query
var query = window.location.search; // gets query from address bar
var target = query.replace("?", ""); // removes "?" from query
window.location.href = target; // sends user to target
} else { // if no protocol is declared
var query = window.location.search; // gets query from address bar
var target = query.replace("?", ""); // removes "?" from query
window.location.href = "http://" + target; // sends user to http://[target] in case target does not support SSL
}
} else { // if no query
window.location.href = "https://yourdomain.com" // sends user back to homepage
};
}, 5000);
</script>
</body>
</html>
How We Got There:
To start, I’ll show you how to create a pure JavaScript redirect that allows you to inject the address you wish to forward to with ease. It only takes a few lines, and anyone with a basic understanding of JavaScript can accomplish this.
First, you need to decide how much time you’d like to go between the user loading your redirect page and the user actually being redirected. In JavaScript, 1000ms equals one second. I’ve chosen five seconds, so I need 5000ms.
<script>
setTimeout(function() {
}, 5000);
</script>
It’s important to note that this page will work by inserting the domain you wish to redirect to after a ? at the end of your page address.
Let’s say your redirect page resides at:
https://yourdomain.com/redirect.html.
In this case, the redirect would work as follows:
https://yourdomain.com/redirect.html?https://newsite.com.
The string that starts with ? is what’s referred to as the “search” or the “query” in terms of JavaScript. However, there’s a problem with this solution: if there is no string after the ?, the page will redirect infinitely.
To fix this, we need to add an if/then statement before we add our actual redirect detection code.
<script>
setTimeout(function() {
if (window.location.search.indexOf('?') !== -1) {
} else {
};
}, 5000);
</script>
The window.location.search gets the string that starts with the ? in the current URL, and the indexOf() function allows us to search for the ? character. In layman’s terms, if the search string includes ? then execute the redirect code (which we’re about to add) and if not (else) it will execute a different code (which we’ll use to redirect back to your homepage, thus preventing the redirect loop).
Now we need to add our redirect code:
<script>
setTimeout(function() {
if (window.location.search.indexOf('?') !== -1) {
if (window.location.search.indexOf('https://') !== -1) {
// if HTTPS is declared, do this
var query = window.location.search;
var target = query.replace("?", "");
window.location.href = target;
} else if (window.location.search.indexOf('http://') !== -1) {
// if HTTP is declared, do this
var query = window.location.search;
var target = query.replace("?", "");
window.location.href = target;
} else {
// if no protocol is declared, add HTTP (just in case the target isn't SSL-enabled)
var query = window.location.search;
var target = query.replace("?", "");
window.location.href = "http://" + target;
}
} else {
window.location.href = "https://yourdomain.com"
};
}, 5000);
</script>
In easier to understand terms, this code removes the ? from ?https://newsite.com and sets https://newsite.com as the new URL, thus causing a redirect. If the ? isn’t found, it redirects back to https://yourdomain.com.
Building a Full Page
To build a full page is as simple as any old HTML page; the code below is a crude example of a full HTML redirect page:
<html>
<head>
<title>Redirect</title>
</head>
<body>
<h1>Redirect</h1>
<p>Please wait while you are redirected.</p>
<script>
setTimeout(function() { // sets time to redirect to 5 seconds
if (window.location.search.indexOf('?') !== -1) { // checks for query in address bar
if (window.location.search.indexOf('https://') !== -1) { // checks for https:// protocol in query
var query = window.location.search; // gets query from address bar
var target = query.replace("?", ""); // removes "?" from query
window.location.href = target; // sends user to target
} else if (window.location.search.indexOf('http://') !== -1) { // checks for http:// protocol in query
var query = window.location.search; // gets query from address bar
var target = query.replace("?", ""); // removes "?" from query
window.location.href = target; // sends user to target
} else { // if no protocol is declared
var query = window.location.search; // gets query from address bar
var target = query.replace("?", ""); // removes "?" from query
window.location.href = "http://" + target; // sends user to http://[target] in case target does not support SSL
}
} else { // if no query
window.location.href = "https://yourdomain.com" // sends user back to homepage
};
}, 5000);
</script>
</body>
</html>
Conclusion
Today we learned how to create a custom injection redirect page with pure JavaScript. You can add this code on any page, or build a new site around it.
For a working example of how the redirect works, try https://script-test.000webhostapp.com/redirect.html?https://hostinger.com. That will take you straight to the Hostinger homepage.
For a working example of how the code we wrote will stop the infinite redirect loop if you’re missing the redirect string, try https://script-test.000webhostapp.com/redirect.html. It will take you straight to the forum homepage instead of redirecting forever.
Need a place to host a site?
Well you’re already here. But, if you think your site might attract a lot of attention, you should definitely consider upgrading to a Hostinger premium plan. Try it today for serious discounts on long-term plans!