Redirecting to a normal URL means sending the user to a URL no matter what that URL is or where it is placed. Directing to a relative URL means redirecting the user to a webpage placed in the same directory as the parent page or home page. Relative URLs can also be used to redirect to files placed in other directories, but the Relative URL would contain only the path and no other information like the domain.
This article will explain two different methods to redirect users to relative URLs but before that, quickly set up two different web pages by using the steps below:
Setting up the two HTML Documents
Create a new HTML document named home and put the following lines inside it:
<b>This is the First Page!</b>
<button onclick="buttonClicked()">Click Me!</button>
</center>
This will display the following webpage on the browser:
After that, create another HTML document in the same directory (this is important to make it a relative URL) and name it as secondPage.html. After that, type the following lines in the secondPage.html:
<b>This is the second page</b>
<br /><br />
<b>I'm in the same Directory as home.html</b>
</center>
Running the secondPage.html in the web browser gives the following outcome:
Setting up the web pages is done. Let’s move to the two different methods for relative URL redirecting.
Method 1: Using the Window Object to Redirect to a Relative URL
In the script file attached to the home.html webpage, create the following function:
// Next lines come inside this body
}
Inside this function, use the window object to access its location property, and from that access the href and equal to the path of the secondPage.html. Since it is a relative URL (both the web pages are in the same directory), simply set the href to the name of the second webpage, which is secondPage.html. The function will look like this:
window.location.href = "secondPage.html";
}
Run the home.html on a web browser and then observe the following functionality:
From the output, it is clear that pressing the button redirects the user to the secondPage.html using its relative URL
Method 2: Using the Document Object to Redirect to a Relative URL
Start by again creating the function created in method 1 with the following lines:
// Next lines come inside this body
}
In this function, instead of the window object, this time around using the document object to access the location object. And then, from the location object, access the href property and set it equal to the relative path of the secondPage.html. Since the secondPage is in the same directory, the relative path would only be the name of the second webpage, which is the “secondPage.html”
document.location.href = "secondPage.html";
}
Run the home.html on a web browser and then observe the following functionality:
It is clear that the user was redirected to the second by using the Relative of the second page with the help of JavaScript.
Wrap up
The user can be redirected to another webpage with the help of a relative URL by using either the document.location.href property or the window.location.href property and setting their value equal to the relative URL of the second webpage. In this article, both of these methods were demonstrated with the help of a step-by-step example.
