Disable hash links in URL JavaScript

Question

This is probably an easy question and I am sure I am missing something here.

All I am trying to do is disable hash tag linking in the URL. For example, if someone were to enter the url: www.example.com/#anchor it would change to www.example.com and get rid of the hash completely in the URL.

I even wouldn't mind just disable the feature and keeping it in the URL, either way.

Here is what I have so far, but I am not having much luck:

var locationHashIndex = window.location.href.lastIndexOf("#"),
    station = window.location.href.slice(locationHashIndex + 1);

    window.location.href = window.location.href.substr(0, locationHashIndex);

This keeps reloading the page all crazy... Not what I am looking for. Any thoughts on this one?

score 3 · Accepted Answer · answered Apr 14 '13 at 20:56

3

You can do:

if(window.location.hash){
    window.location.href = window.location.href.replace(/#.*/,'');
}

answered Apr 14 '13 at 20:56

karthikr

97,368
26
197
188

This will still happen on every page load as you are not placing any conditional around the code at all. – Apr 14 '13 at 21:00
Forget what I said earlier, this will work for my purposes. – Sethen Apr 14 '13 at 21:14
glad it helped. there is quite a bit of help available for listening to on hash change if that is what you are looking for. – karthikr Apr 14 '13 at 21:21
with `/path/file.php#` the `window.location.hash` will return `""` == `false` – Nov 13 '19 at 12:34

score 1 · Answer 2 · answered Apr 14 '13 at 20:57

1

You will want to look into window.location.hash, that stores the value that you're trying to remove, and so you'll want to only run your code if there is a value in that variable.

if(window.location.hash != ''){
    // code here
}

answered Apr 14 '13 at 20:57

I wrapped this around my current code and this seems to work upon refresh, but when I type in the URL, it's not working. – Sethen Apr 14 '13 at 21:06

score 1 · Answer 3 · answered Apr 14 '13 at 20:57

1

you should use window.history.pushState instead window.location.href https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

answered Apr 14 '13 at 20:57

monkeyinsight

4,719
1
20
28

score 1 · Answer 4 · edited May 23 '17 at 10:25

If you are amenable to using jQuery, see https://stackoverflow.com/a/8683139/618649 for a simple solution to just disable all URL's with #'s in them.

In this example, you can click on the Go There link all day and nothing will happen.

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <a href="./#there"><span id="here">Go There...</span></a>
        <br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.
        <br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.
        <br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.
        <br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.
        <br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.
        <br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.
        <span id="there">There...</span></a>

        <script language="javascript">
        jQuery(function ($) {
            $("a[href*=#]").click(function(e) {
                e.preventDefault();
            });
        });
        </script>
    </body>
</html>

Disable hash links in URL JavaScript

4 Answers4