CODEWITHSUNDEEP
javascripthtmlhttp-redirecthashtag
Magnus Kristoffersen
Magnus Kristoffersen

Reputation: 39

Return to index.html if refresh is hit on a hashtag link

I'm making a website, where the whole jQuery script I use acts weird, once someone hits refresh - so I thought that when someone refreshes, their URL changes from lets say www.website.com/index.html#test to just www.website.com/index.html ... Is this possible, if so, how?

Upvotes: 2

Views: 1972

Answers (3)

JMag
JMag

Reputation: 120

I had a similar issue with my application. I was a vanilla HTML, vanilla JS and vanilla CSS application.

window.addEventListener("hashchange", onRouteChanged);

function onRouteChanged() {
    const hash = window.location.hash;

    const routerView = document.getElementById("router-view");

    if (!(routerView instanceof HTMLElement)) {
        throw new ReferenceError("No router view element available for rendering");
    }

    switch (hash) {
        case '#about':
            routerView.innerHTML = `<section id="about">
                                        <div class="title-box">
                                            <h3>About</h3>
                                            <hr/>
                                        </div>
                                        <h4></h4>
                                        <footer>
                                            <span>© 2023 Creator of The Quotes Room</span>
                                        </footer>
                                    </section>`;
            about();
            break;
        case "#home":
            window.location = "index.html"
            break;
        default:
            routerView.innerHTML = "<h1>404 - Page Not Found</h1>";
            break;
    }
}
<header>
        <section>
            <img src="img/Quotes room.png" alt="logo" target="logo">
            <h1>The Quotes Room</h1>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><input type="text" placeholder="Search.."></li>
                </ul>
            </nav>
        </section>
    </header>

So as you can see, I used the hash for routing from a page to another one. A for me, it worked with:

window.location = "index.html"

Upvotes: 0

Harley
Harley

Reputation: 1534

window.onbeforeunload = function(e) 
{
    window.location = "index.html#introduction";
};

This lets you redirect a refresh to another section but it didn't seem to work redirecting to index.html

Upvotes: 0

Arturs Lapins
Arturs Lapins

Reputation: 9

What you can do is check if the url contains hashes so:

var url=window.location;
if(url.indexOf('#')!=-1){
   window.location = 'index.html';
}

what the indexOf does is it checks if a string contains some substring and if it does then it returns the index of where that substring is and if it dosen't find it then it returns -1 so what we did there is we checked if it't not equal to -1 so that means the substring exists then we want to go to index.html

Upvotes: 0

Related Questions