12

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?

Community
  • 1
  • 1
brad
  • 73,826
  • 21
  • 73
  • 85

7 Answers7

11

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.

Ken Browning
  • 28,693
  • 6
  • 56
  • 68
  • 1
    +1 Brad, you're trying to work around a problem that doesn't need to exist. Do you really need to use the base tag? – roborourke Mar 18 '09 at 17:31
3

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>
Adam
  • 1,467
  • 1
  • 15
  • 15
  • See Gumbo's comment, returning false from a click handler stops the link being followed. javascript: URLs are generally best avoided. – bobince Mar 19 '09 at 10:16
1

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.

Gareth
  • 133,157
  • 36
  • 148
  • 157
0
<html>
<head>
    <base href="http://example.com/" />
</head>
<body>
    <a href="./dir/page#">Link Text</a>
</body>
</html>
xhdix
  • 145
  • 1
  • 7
0

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.

Georgios Syngouroglou
  • 18,813
  • 9
  • 90
  • 92
0

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.)

Gumbo
  • 643,351
  • 109
  • 780
  • 844
  • OP specified "That way, when someone clicks the link before the page loads nothing terrible happens" which suggests the onclick handler hasn't been attached yet. Inline javascript is ugly and should be avoided – Gareth Mar 18 '09 at 16:52
  • After your edit, it's progressive enhancement which is *causing* this problem. The problem is the user is clicking the "link" *before* the extra click handlers have been added. In that case, there's no way to avoid link navigation. The solution is to make it *not* a link – Gareth Mar 18 '09 at 17:21
  • Or, of course, make it a link which has an equivalent non-javascript action. Depending on what the action is, that's probably the best solution anyway – Gareth Mar 18 '09 at 17:22
-1

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

<a href="#"> => <a>
WebDeg Brian
  • 802
  • 1
  • 7
  • 21