✖

All TalkersCode Topics

Follow TalkersCode On Social Media

JavaScript Redirect To Relative URL

Last Updated : Jan 1, 2023

IN - JavaScript

JavaScript Redirect To Relative URL

In this tutorial we will show you the solution of JavaScript redirect to relative URL, we will learn about how redirect to relative url in javascript.

Here relative url means when giving long length absolute path of website instead of just mention necessary page link with current file name is enough so we can cut down the workload and time taken.

We defined relative url using inbuilt service in javascript with window object so relative url will load on current window.

Step By Step Guide On JavaScript Redirect To Relative URL :-

Here we defined one button with ‘onClick’ event for load javascript function ‘newLoc()’ so when user click the button ‘newLoc()’ function will loads.

Within that function we defined ‘window.location.href’ it collects path information of file what we given as url.

The location object contains information about the current url, it is property of the window object.

The ‘href’ used to sets or return the entire url in the browser address bar for move to that file page. 

<!DOCTYPE html&g;
<html&g;
    <head&g;
        <title&g;Relative URL</title&g;
    </head&g;
    <body&g;
        <button onclick="newLoc()"&g;New Location</button&g;
        <script&g;
            function newLoc(){
                window.location.href="app.html";
            }
        </script&g;
    </body&g;
</html&g;

App.html 

<!DOCTYPE html&g;
<html&g;
    <head&g;
        <title&g;sample</title&g;
    </head&g;
    <body&g;
        <h1&g;<center&g;WELCOME EVERYONE<center&g;</h1&g;
    </body&g;
</html&g;
  1. <!DOCTYPE html&g; tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html&g; tag is used to indicate the beginning of HTML document.
  3. As above shown <head&g; tag is contains information about webpage and external file links are declared here. <title&g; tag is used for set the webpage title.
  4. Both <head&g; and <title&g; tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body&g; tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. Here we defined one button ‘New Location’ and within that we defined ‘onClick’ event with function call for load ‘newLoc()’ function when user clicks on the button.
  7. Within <script&g; tag we defined our javascript program, we defined ‘newLoc()’ function for collects url information of particular relative page by ‘window.location.href’ service.
  8. Here we provided ‘app.html’ file name, this file created on same place of current file so we just provides file name that’s enough for window object to load the file on browser.
  9. Both </body&g;,</html&g; tags closed respectively. </body&g; tag indicates the end of body, Then </html&g; tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to use relative url service in javascript.

When we execute our program on browser we can see the button ‘New Location’ then when user clicks on that button on that current window tab loads ‘app.html’ with welcome message in center of webpage.

If your ‘app.html’ stored another folder means you have to mention that ‘foldername or websiteLink/app.html’ as url value and confirm one thing you can’t store your result html file on another directory or non available files.

We will see all these methods in future.

I hope this tutorial on JavaScript redirect to relative URL helps you and the steps and method mentioned above are easy to follow and implement.

Latest Tutorials