JavaScript redirect, open new tab redirect without Popup block

Author image
Author

Fashanu T.

14, Jan 2021

2 Minutes Read...


redirect.jpg

JavaScript new tab redirect

JavaScript Location API contains several properties that might come in handy.

location.host: returns a document domain name only i.e apluswebmaker.com, example.com.

location.href: returns the full url path i.e https://apluswebmaker.com/bugger, https://example.com/cutomer/order/?bugger=creamy&number=2.

location.protocol: returns either http or https protocols of the document.

location.search: returns the query parameter of the document url. I.e if your document url is https://example.com/bugger?number=5, it will return this string ?number=5.

location.origin: this is read-only and cannot be reassigned. This returns the origin of the document. i.e http://example.com, https://apluswebmaker.com.

Without further ado, lets get right to why we are here....πŸ˜ƒ

Redirect to another URL in JavaScript

To redirect to another URL using JavaScript, use the code below πŸ™‚::

javascript
window.location.href = 'https://example.com/page2';

To open a new window in your browser and then redirect

Use the code below::

javascript
let newTab = window.open(url, name, spec);
i.e
let newTab = window.open('https://example.com', '_blank', '');

url: the location you want to redirect to.

name: specifies the target attribute. Two of the most used targets are;- _self:: new url replace current page url. _blank:: opens a new tab.

To reload a page in JavaScript

javascript
window.location.reload();
//this reloads a page from browser cache when available
javascript
window.location.reload(true);
//this forces a reload, if the browser history cache is not available

Redirect on the same page #hash

When you have a long page with a list of sections, you might opt to setup an hash link to each section.

When a user clicks on a link from the listed links, the browser automatically scrolls to the section that reference that link hash.

Take for example::

html
<a href="#deep-down">Far down</a>
<a href="#deeper-below">Even further down</a> <!-- on and on and on.......--> <h2> <span id="deep-down"> &nbsp; </span> This section of the page is far down </h2>

From the code above, clicking one of the anchor tag with reference href, takes you directly to the header that reference its id.

To scroll to a particular section in JavaScript, location.href cannot be used, as it reloads the page. 

So, to scroll to a hash section on a page without reloading, use the code below::

javascript
window.location.hash = "#deep-down";

Solve popup block after opening a new tab

Opening a new tab is simple, but redirecting to a new url afterwards can trigger a popup block in browsers.

This is if you do not specify a redirect url immediately after opening the new tab, β€”mostly down to security concerns with regards to opening new tabs in browsers.

Lets say you have an AJAX process that requires a bit of time to fetch the necessary redirect url. Such fetch operation can take from a second to a minute of load time, and when the data is finally available, you are already served with a pop up block.

To work around this pop up block after opening a new tab in javascript requires::

  1. Creating the new tab.
  2. Writing to the new tab document an animated loader.
  3. Once the data arrives, redirect the tab to the new url.

Here is a sample code i made with a loading Spinner::

javascript
const spinnerContent = '<div id="spinner">Loading</div><style>'+
'#spinner{display:flex;align-items:center;text-shadow:3px 3px 5px rgba(0,0,0,0.5);box-shadow:3px 3px 5px rgba(0,0,0,0.2);justify-content:center;width:5em;'+
'font-weight:700;height:5em;border-radius:50%;color:white;background:rgb(70, 181, 228);font-size:1em;margin:auto;margin-top:calc(50vh - 2.5em);animation: spin 1s infinite;}'+
'@keyframes spin{0%{width:5em;height:5em;font-size:1em;}50%{width:6em;height:6em;font-size:1.5em;}100%{width:5em; height:5em;font-size:1em;}}</style>';

let newTab = window.open('', '_blank', '');
newTab.document.write(spinnerContent);
fetch('http://example.com/fetch') .then(function (res) { return res.json(); }) .then(function(data){ data.error ? newTab.close() : newTab.location = data.url; }) .catch(function(){ newTab.close(); });

This gives you an animated loader/spinner till when the data is available. Once the data is available, the opened tab redirects to the newly fetched url.

Another thing is, if there is an error from fetched data, the opened tab closes instantly.

In conclusion, there are many situation when we need to use a JavaScript redirect methods, or open a new tab and perform a redirect. With the above code, i have covered necessary scenarios that might occur to you. If there are other scenarios not covered here, drop a comment down below β€”πŸΉ.

Wait, lest i forget πŸ™‚ , learn how to send JSON to PHP script with AJAX and fetch API using the correct header here.