how can i get the url of the content home html in adress bar by jquery load function

Question

I am using jquery load() function to load content to a container of the index page. the page was loaded but the URI of content is not displaying in the address bar. how can I get the URL of the content( home.html) in the address bar?

 index.html


 <!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="https://www.edureka.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-grid.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/bootstrap-reboot.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/carousel.js"></script>
    <script src="js/larelapa.js"></script>
    <script
        $(function() {
            $("#home").click(function() {
                $('#container').load('home.html');
            });
        });

        $(function() {
            $("#about").click(function() {
                $('#container').load('about.html');
            });
        });
        $(function() {
            $("#contact").click(function() {
                $('#container').load('contact.html');
            });
        });
        $(function() {
            $("#policy").click(function() {
                $('#container').load('policy.html');
            });
        });
    </script>
</head>
<body id="bg">

            <a id="home" href="#" class="w3-bar-item w3-button w3-hover-white btn-block" onclick="w3_close()">Home</a>  

    </div>
    <div style="position: absolute; bottom: 0;">

       <li> <a id="about" href="#" onclick="w3_close()">About us</a></li>
       <li><a id="contact" href="#" onclick="w3_close()">Contact Us</a></li>
       <li> <a id="policy" href="#" onclick="w3_close()">Policy</a></li>
    </div>
</nav>
            <div id="container"></div>
</div>
    </body>

</html>




    home.html

<!DOCTYPE html>
<html lang="en">
<head>   
</head>
<body>
<div  class="container-fluid row">  
</div>
</div>
</body>
</html>

after clicking the home button the home.html loaded in the container of the index.html and URL shows http://localhost:63342/code/index.html# which I want to be http://localhost:63342/code/index.html?home that I can bookmark. I am a newbie to javascript.

rajatha · Answer 1 · Jul 28, 2022

You need to use

history.pushState(stateObject, "title", URL);

it would look like this:

    $(function() {
        $("#home").click(function() {
            $('#container').load('home.html');
            window.history.pushState({url: "home.html"}, "", "home.html");
        });
    });

But instead of making one jquery event for every pages you should make it reusable so you only have one code to maintain.