Url Hash with Html Base Tag

Question

Url Hash with Html Base Tag

7.7k Views Asked by brad At 18 March 2009 at 16:48

window.location.hash

When using a link for a javascript action, I usually do something like this:

<a href="#">Link Text</a>

That way, when someone clicks the link before the page loads nothing terrible happens.

Html Base Tag

On my current project I use this same construct, but with a base tag:

<html>
<head>
    <base href="http://example.com/" />
</head>
<body>
    <a href="#">Link Text</a>
</body>
</html>

However, if the page url is:

http://example.com/dir/page

clicking the link navigates to

http://example.com/#

rather than

http://example.com/dir/page#

How can I fix this?

Original Q&A

There are 7 best solutions below

Gumbo On 18 March 2009 at 16:50

Return false on the onclick event to disable the link:

<a href="#" onclick="doSomething(); return false">Link Text</a>

(This is just an example of how you’d do it inline. But try to avoid inline declarations and use techniques of progressive enhancements.)

Gareth On 18 March 2009 at 16:51

If there's no URL that is suitable for a non-javascript user, then don't use an <a>. <a> tags are for links to other pages.

Any visible HTML element can have an onclick and won't have this problem you describe.

Adam On 18 March 2009 at 17:38

If you're inclined to use an a tag another solution is to not use # as the href target (when you don't specify one it causes a jump to the top of the page which I find undesirable). What you can do is:

<a href="javascript:">Some Link that Goes nowhere</a>

Really though, unless you are doing something that requires that to be an a tag a span would be your best bet:

CSS:

.generic_link {
  text-decoration:underline;
}
.generic_link:hover {
  text-decoration:none;
}

HTML:

<span class="generic_link">Something that really isn't a link</span>

xhdix On 11 February 2015 at 00:07

<html>
<head>
    <base href="http://example.com/" />
</head>
<body>
    <a href="./dir/page#">Link Text</a>
</body>
</html>

Georgios Syngouroglou On 24 January 2016 at 11:44

I had the same issue in the past.
I had a link that i wanted to be empty, to link to the current page.
Without the base html element this will be just an a element with href="#".

My example without using the base html element,

<li>
    <a href="#"><div>The text of my Link</div></a>
</li>

The same example with the solution i found,

<li style="cursor: pointer !important;">
    <a href="#" style="pointer-events: none;"><div>The text of my Link</div></a>
</li>

This solution only uses css to disable the link.

With the first css rule cursor: pointer !important; i ensure that this link will have the correct (for my case) pointer icon.
With the second rule pointer-events: none; i ensure that this link will not be clickable.
You can find more about this rule following this link.

WebDeg Brian On 30 December 2017 at 02:33

You can just simply remove href attribute from your <a> tag.

<a href="#"> => <a>

**Ken Browning** · Accepted Answer · 2009-03-18T16:49:50.230000

Ken Browning On 18 March 2009 at 16:49 BEST ANSWER

Either remove your base tag or change your href attributes to be fully qualified. What you are observing is the intended behavior when you mix base with a elements.

Url Hash with Html Base Tag

window.location.hash

Html Base Tag

There are 7 best solutions below

This solution only uses css to disable the link.

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in HASH

Related Questions in BASE-TAG

Trending Questions

Popular # Hahtags

Popular Questions